命名路由
给当前规则起一个名成称,用于路由跳转所用
通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。
{
path:'/xw/:id,
name:'xw'
component:Detail,
}
this.$router.push({
name:'xw',
params:{id}
})
导航守卫
导航守卫就是路由跳转过程中的一些钩子函数,这个过程中触发的这些函数能让你操作一些其他的事儿的时机,这就是导航守卫。
vue中给我们提供了7个钩子函数
全局导航守卫
- 全局前置守卫
- 全局解析守卫
- 全局后置钩子
注意:前置守卫和解析守卫一定要调用next(),不然就不会往下走
全局守卫
全局前置守卫
- 当一个导航触发时,就会触发前置守卫
- to:目标路由对象
- from 来源路由对象
- next函数,让路由继续向下执行,否则页面空白
router.beforeEach((to, from, next) => {
// ...
next()
})
全局解析守卫
router.beforeResolve((to, from, next) => {
// ...
next()
})
全局后置钩子
此钩子不会接受 next 函数也不会改变导航本身
router.afterEach((to, from) => {
// ...
})
路由独享守卫
只有当前的路由规则下它才生效
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
next()
}
}
]
})
组件内守卫
你可以在路由组件内直接定义以下路由导航守卫
- 动态路由参数的改变会触发beforeRouterupdate
- 访问此组件就会触发beforeRouteEnter
- 离开当前路由组件就会执行beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
只要是路由守卫都会比声明周期早一些执行
1.当独享遇见组件内守卫时
执行顺序: 独享-》组件
元信息
路由元信息,对路由规则的补充和说明,定义路由的时候可以配置 meta 字段:
const router = new VueRouter({
routes: [
{
path: '/admin',
component: Admin,
meta: {login:true}
}
]
})
路由懒加载
当打包构建应用时,js包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
component使用函数的方式调用组件,component函数的方式,一定要返回一个promise对象
是一个性能优化的点
这个是对应的异步组件
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
这个是路由规则中的路由懒加载
const router = new VueRouter({
routes: [{ path: '/foo', component: Foo }]
})
vuex
从vuex里面读取数据
待完善!!!!