Vue-router
view-link标签的属性：
1.to="":略；在这里必须写完整的路径名，包括嵌套路由
2.active-class="":当前路由激活是应用的样式
3.tag="":实际渲染的标签
4.replace:将路由操作不写入浏览器的History对象中
路由传参：
方式一：
1.在view-link标签中的写法：v-bind:to="'/main/'+route"
2.定义时：{ path:'/main/:param',component:xxx }
3.参数获取：在当前路由的组件中使用 $route.params
方式二：
1.在view-link标签的to属性中使用v-bind:
v-bind:to="{ path='/路径名', query: {
key1:value1,
key2:value2
} }"
2.参数获取，在当前路由的组件中使用：$route.query
路由手动传参
//方式一
this.$router.push[replace]('/路径名'+params)
//方式二
this.$router.push[replace]({
path:'路径名',
query:{
key1:value1,
key2:value2,
// ...
}
})
$router与$route
$router表示全局定义的VueRouter对象
$router中的方法：
1.push() 往浏览器的History对象中推入一个历史记录
2.replace() 将浏览器当前的路径替换，并不写入浏览器的History对象中
$route表示当前激活的路由
//获取动态路由参数
this.$route.params.参数名
路由懒加载
//第一步，引入，必须是以下写法
const comp = () => import('组件路径')
//第二步，注册
component: comp
导航守卫
注册路由时加上以下代码
//这个函数将会在每次路由跳转之前调用
router.beforeEach((to,from,next)=>{
//to 要跳转到的路由
//from 当前激活的路由
//这里的title属性需要手动定义在每个路由的meta属性中
//修改每次切换路由时网页的名字
ducument.title = to.matched[0].meta.title
//next参数是一个函数，必须调用一次
next()
})
路由独享守卫
定义路由时在需要定义独享守卫的路由中定义一个钩子函数
{
path:'...',
component:xxx,
//进入该路由之前调用该钩子函数
beforeEnter(to,from,next){
//xxxxx
}
}
组件内的守卫
定义组件时在组件内定义新的钩子函数：
const component = {
template:'xxxxxx',
beforeRouteEnter(){
//此处不能访问该组件的this，因为此时该组件实例还未被创建完成
},
beforeRouteUpdate(){
//可以访问该组件实例的this
},
beforeRouteLeave(){
//可以访问该组件实例的this
}
}
keep-alive
1.用于缓存被keep-alive标签包裹起来的组件，即当该组件处于隐藏状态时不会被销毁
2.被keep-alive标签包裹起来的组件内可以使用额外的钩子函数：
{
//...
activated(){
//组件处于激活状态时调用
},
deactivated(){
//组件处于隐藏状态时调用
}
//...
}
keep-laive的两个重要属性
1.include：
字符串或正则表达式，匹配组件的name属性，缓存符合条件的组件，多个组件用字符串表示时用逗号隔开，且不能有多的空格符
2.exclude:
字符串或正则表达式，匹配组件的name属性，缓存除了匹配到的其他组件，多个组件用字符串表示时用逗号隔开，且不能有多的空格符