一 vue-router部分
***在路由之间传递params参数
path: ‘/detail/:id‘ 动态路径参数
<li> <router-link to="/word/router1/123">路由1</router-link> </li>
<router-link :to="{path: ‘/detail/‘ + this.$route.params.id}" >此团详情</router-link>
***在路由跳转地方传递query参数
<router-link v-bind:to="{path:‘/word/router2‘,query:{id:123}}">路由2
</router-link>
***路由跳转三种方式
// 用命名路由的方式：
<router-link :to="{name:‘detail‘,params:{id:this.$route.params.id }}" >路由</router-link>
// 用router.push()的方式
router.push({name:‘detail‘, params:{ id: this.$route.params.id}})
//用replace实现页面的跳转
this.$router.replace({path:‘/word/router2‘,query:{id:123}});
***路由前进后退 this.$router.go(1);
***路由重定向 redirect:‘/word/router3‘
***定义路由的时可配置 meta
const routes = [{path:‘/activity‘, meta: {isNeedAuth: false, title: ‘活动‘}},];
***组件的异步加载(按需加载组件) vue-router懒加载
当页面很多，组件很多的时候，会发现页面在首次加载的时候异常的慢，这个是因为vue首次加载的时候把可能一开始看不见的组件也一次加载了，这个时候就需要对页面优化了，就需要异步组件了。如何去写异步组件呢，只需要在你的路由index,js里加上require就可以了
方式一：{ path: ‘/home‘,
name: ‘Home‘,
component: function(resolve){
require([‘url‘], resolve)//懒加载
或者： component: resolve => require([URL], resolve),//懒加载
注意： component: require(‘url‘) //这是直接加载！
}
}
方式二：在项目router/index.js文件中将
import good from ‘url‘ 改为：
Const good=(resolve)=>{ import(‘url‘).then((module)=>{ resolve(module) })}//懒加载
方式三：在项目router/index.js 文件中将
import good from ‘url‘ 改为：
Const good =require.ensure([],()=>r(require(‘url’)),’good’) //懒加载
之后执行npm run build，可以看出app.xxx.js被分成了一个个小的js文件，根据按需加载，这样就大大缩短了项目的加载时间，更加高效。
***vue+axios实现路由登录拦截 （暂时可不看）
参考https://www.cnblogs.com/guoxianglei/p/7084506.html
首先，在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录
const routes = [
{
path: ‘/repository‘,
name: ‘repository‘,
meta: {
requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
},
component: Repository
},
];
然后，我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断
router.beforeEach((to, from, next) => {
。。。
})
最后，用 axios 的拦截器
// http request 拦截器
axios.interceptors.request.use(。。。）
// http response 拦截器
axios.interceptors.response.use(。。。）
二 vue组件间通信
1 一个子组件使用$emit(‘eventName‘, param);发送事件, 在父组件通过@eventName="listenEvent(父组件事件名字)"
// 父组件
export default {
methos: {
listenEvent (data) {
// data 即为子组件传递过来的参数
}
}
}
