1. 路由配置
默认路由跳转
{
path: '/',
redirect: '/app'
}
在 new Router时可用的配置参数:
mode : history
base : 基路径
linkActiveClass : 'active-link' // 被激活样式(模糊匹配)
linkExactActiveClass : 'exact-active-link' //被激活样式(精准匹配)
/**
linkActiveClass和linkExactActiveClass的区别
使用linkActiveClass,路由跳转为/main和/main/a时否会激活样式;
使用linkExactActiveClass,路由跳转为/main时会激活样式,跳转为/main/a时则不会激活样式。
**/
scrollBehavior(to, from, savedPosition) {//默认滚动位置
if(savedPosition) {
return savedPosition
} else {
return {x:0,y:0}
}
}
fallback: false //单页变多页
2.路由传参
Vue路由传参的几种方式
$router.push 实现path携带参数的跳转:
this.$router.push({
path: `/describe/${id}`,
})
//路由配置:
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
//子组件中获取参数
$route.params.id
通过params传参:
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
//路由配置
{
path: '/describe',
name: 'Describe',
component: Describe
}
//子组件中获取参数
$route.params.id
通过使用path来匹配路由,然后通过query来传递参数。这种情况下 query传递的参数会显示在url后面?id=?
this.$router.push({
path: '/describe',
query: {
id: id
}
})
//路由配置
{
path: '/describe',
name: 'Describe',
component: Describe
}
//子组件中获取参数
$route.query.id
3. 路由守卫(导航守卫)
即路由跳转前做一些验证。
全局守卫
每次路由跳转都能够触发三个function:
router.beforeEach((to, from, next) => {
//全局前置守卫
//路由跳转前拦截
})
router.beforeResolve((to, from, next) => {
//全局解析守卫
//跟beforeEach相似,区别在于导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用
})
router.afterEach((to, from) => {
//全局后置钩子
})
组件内守卫
组件内有三个钩子函数可进行路由守卫:
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
4. 异步路由
例:
//路由配置
{
path: '/describe',
name: 'Describe',
component: () => import('...组件路径')
}
组件在路由跳转时才渲染
需要安装babel-plugin-syntax-dynamic-import插件
好处:可以使首屏加载速度更快。