vue + vue-router + vue-resource 基于vue-cli脚手架 --->笔记
ps: 基于Vue2.0 npm的vue-cli脚手架
在vue-router中路由路径的简写代码:
点击打开项目 > build > webpack.base.conf.js 找到webpack.base.conf.js文件修改即可
值得注意的是,修改了alias下的引用路径后,要重启项目(npm run dev),否则将会报错
function resolve (dir) {
return path.join(__dirname, '..', dir)
} module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'components': resolve('src/components'),
}
},
下面代码中即用到简写的路由路径:components
ps: 值得注意的是1.0中路由默认展现第一个组件的go('/goods')方法,在2.0中不行,可用 导航式编程 router.push('/goods')
或者---在路由配置项中进行设置,用 重定向 的方法
如下 routes 设置项--> {path: '/', redirect: goods},即默认进来 '/' 未加路由地址时,显示 goods 这个组件
导航式编程方法:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';
const routes = [
{path: '/', redirect: goods, name:"商品"},
{path: '/goods', component: goods, name: "商品"},
{path: '/ratings', component: ratings, name: "评论"},
{path: '/seller', component: seller, name: "商家"}
]
export default new VueRouter({
routes: routes
})
重定向方法:
import Vue from 'vue';
import router from './router';
import App from './App';
router.afterEach((to, from, next) => {
document.title = to.name;
})
router.push('/goods')
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: {App}
});
基于vue-router路由切换时,动态显示组件或页面模块的标题方法:
const routes = [
{path: '/', redirect: goods, name:"商品"},
{path: '/goods', component: goods, name: "商品"},
{path: '/ratings', component: ratings, name: "评论"},
{path: '/seller', component: seller, name: "商家"}
]
ps: 其中name值,就是上面代码中路由配置的组件的 name 值
router.afterEach((to, from, next) => {
document.title = to.name;
})
参考地址 https://juejin.im/entry/585377cf8e450a006c53aef1
vue + vue-router + vue-resource 基于vue-cli脚手架 --->笔记的更多相关文章
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- [译]基于Vue.js的10个最佳UI框架,用于构建移动应用程序
原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- Vue应用框架整合与实战--Vue技术生态圈篇
实用框架以及工具 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 Element-UI ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 ...
- 基于vue现有项目的服务器端渲染SSR改造
前面的话 不论是官网教程,还是官方DEMO,都是从0开始的服务端渲染配置.对于现有项目的服务器端渲染SSR改造,特别是基于vue cli生成的项目,没有特别提及.本文就小火柴的前端小站这个前台项目进行 ...
- 基于Vue的前后端分离项目实践
一.为什么需要前后端分离 1.1什么是前后端分离 前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目.怎么理解前后端分离?直观的感觉就是前后端分开去做,即功 ...
- 83.基于Vue SEO的四种方案(小结)
前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SRR和静态化基于Nuxt来说. 1.SSR服务器渲染:2.静态化:3.预渲染 ...
- 基于Vue搭建自己的组件库(1)
本项目演示地址:https://husilang.github.io/zm-ui 项目参考文章:从零开始搭建Vue组件库 VV-UI 项目的初衷是学习怎么封装一个基于Vue的UI组件库,顺便记录每个步 ...
- 以寡治众各个击破,超大文件分片上传之构建基于Vue.js3.0+Ant-desgin+Tornado6纯异步IO高效写入服务
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_218 分治算法是一种很古老但很务实的方法.本意即使将一个较大的整体打碎分成小的局部,这样每个小的局部都不足以对抗大的整体.战国时期 ...
- 基于Vue的前端UI组件库的比对和选型
大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 由于录制视频的需要,要做前端UI组件库的选型.平时国内外也见了不少基于Vue的UI ...
随机推荐
- mongoDB 常用操作CRUD
1.显示所有的数据库 show dbs 2.切换数据库(如果没有数据库,即是创建数据库) use 数据库名称 3.显示所有的表 show tables 4.查看数据库里的表 show co ...
- valgrind使用
参数配置 gcc -g: 增加调试信息,供valgrind精确定位. -O0:关闭gcc优化:优化产生的代码可能会造成valgrind误判. valgrind --leak-check=full no ...
- 推荐一个好的Redis GUI 客户端工具
推荐一个好的Redis GUI 客户端工具 Redis Desktop Manager
- bootstrap和elementUI真的会冲突
前两天,做了一个支持markdown的功能: http://www.cnblogs.com/XHappyness/p/8097756.html 后面发现预览效果某些标签需要bootstrap的支持才能 ...
- 详细介绍弹性盒模型(display:flex)
弹性盒模型,即Flexbox,是css3中的新特性,其实弹性盒模型的原身是dispaly:box:这里,我们暂时不考虑旧的,我们只看新的. 为容器指定弹性盒子,只需在父元素(也就是容器)中设置:dis ...
- [UOJ#351]新年的叶子
[UOJ#351]新年的叶子 试题描述 躲过了AlphaGo 之后,你躲在 SingleDog 的长毛里,和它们一起来到了AlphaGo 的家.此时你们才突然发现,AlphaGo 的家居然是一个隐藏在 ...
- [CF912A]Tricky Alchemy
题意:你有a个黄水晶和b个蓝水晶,要求要x个黄水晶球(2黄),y个绿水晶球(1黄1蓝),z个蓝水晶球(3蓝),问还要多少水晶题解:模拟 C++ Code: #include<cstdio> ...
- NAS星云链 入门之从零开发第一个DAPP
应该有很多小伙伴和我一样,一直想去入手学习区块链,但是总无从下手,有些概念感觉理解了,有感觉没理解.其实这都是“没实践”的锅. 所谓看十遍不如想一遍,想一遍不如做一遍.这不最近星云链nebulas正有 ...
- yaf学习网站
http://www.01happy.com/php-yaf-ext-business/
- 怎么让Intellj Idea 把数据库的表映射成hibernate的domain对象
步骤如下: 第一步:连接数据源: 点击:idea右边的database.如下图所示: 或者你依次点击:view-->Tool windows--->database 然后你将看在如下点击下 ...