1、路由间传参
1.1、使用动态匹配传参
路由配置
{ path: '/argu/:name', name: 'argu', component: () => import('@/views/argu.vue'), props: true }
props: true
允许路由的 params 作为属性路由传参
props: { name: { type: String, default: '' } }
这样 路劲接的 name 就可以传入到 组件的 props 中
1.2、使用对象模式
路由配置
直接在props构成对象
{ path: '/about', name: 'About', component: () => import('../views/About.vue'), props: { food: 'banana' } }
1.3、函数模式
路由配置
在 props 构成函数
{ path: '/', alias: '/home_page', name: 'Home', component: Home, props: route => ({ // 相当于 return { food.. } food: route.query.food }) }
2、路由history模式
2.1、配置 history 模式
在路由配置文件index.js中,设置一个字段
mode: 'history'
const router = new VueRouter({ mode: 'history', routes })
2.2、使用history路由配置建议
在路由配置路劲的文件router.js,建议 在最后 加上一个匹配所有路劲的配置
{ path: '*', component: () => import('@/views/error_404.vue') }
- 在最后面加上,才不会影响前面设定的路劲,优先级最低
3、导航守卫
3.1、全局守卫
全局守卫配置
在路由配置文件 index.js 中利用 创建的 router 进行配置
router.beforeEach((to, from, next) => { })
ada
3.2、全局守卫种类
全局前置守卫beforEach
- to:即将要进入的目标路由对象
- from:当前导航正要离开的路由
- next:执行下一步
// 一个简单的判断有没有登录的前置守卫 router.beforeEach((to, from, next) => { if(to.name !== 'login') { // 如果访问的不是登录页面 if(HAS_LOGINED) next(); // 登录了,下一步,允许访问 else next({name: 'login'}) // 没登陆,跳转到登录页面 } })
全局后置钩子afterEach
全局后置钩子与全局前置守卫类似,不同的是,这些钩子不会接收 next 函数也不会改变导航本身
router.afterEach((to, from) => { })
3.3、路由独享的守卫
路由独享的守卫配置
- 使用方法和全局守卫相同
- 不同的是:全局守卫可以作用于全局,路由独享守卫只能作用于被设置守卫的路由
在路由配置路劲的文件 router.js 中,为需要的路由路劲添加 守卫
{ path: '/', alias: '/home_page', name: 'Home', component: Home, props: route => ({ food: route.query.food }), beforeEnter: (to, from, next) => { // 配置局部前置守卫 // 事件 next(); } }
3.4、组件内的守卫
在组件内直接定义以下路由导航守卫
(1)beforeRouteEnter (刚进入组件)
- 路由时该组件被 confirm 前调用,即组件还没有被渲染时
- **所以无法获取该组件实例
this
,因为守卫执行前,组件实例还未被创建 **- 如果要获取,可以通过next获取该实例对象(vm)
props: { food: { type: String, default: 'apple' } }, beforeRouteEnter(to, from, next) { next(vm => { console.log(vm) console.log(vm.food) }); }
(2) beforeRouteLeave (准备离开组件)
- 通常用于禁止用户还未保存修改突然离开,可以通过
next(false)
来取消- 可以访问this
beforeRouteLeave(to, from, next) { const leave = confirm('你明确要离开吗') if(leave) next() else next(false) }
(3) beforeRouteUpdata
- 当路由发生变化,组件复用时调用
- 可以使用this
beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候, // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就 会在这个情况下被调用。 // 可以访问组件实例 `this` }
4、完整的导航解析流程
- 导航被触发
- 在失活的组件(即将离开的组件)里调用离开守卫
beforeRouteLeave
- 调用全局的前置守卫
beforeEach
- 在重用的组件里调用
beforeRouteUpdata
- 调用路由独享的守卫
beforeEnter
- 解析异步路由组件
- 在被激活的组件(即将进入的组件页面)里调用
beforeRouteEnter
- 调用全局的解析守卫
beforeResolve
- 导航被确认
- 调用全局的后置守卫
afterEach
- 触发 DOM 更新
- 用创建好的实例,调用
beforeRouteEnter
守卫传给 next 的回调函数 vm
5、路由源信息
meta
可以在 router.js 给想要给予源信息的组件添加
meta
属性以下为给切换组件时修改标题
{ path: '/about', name: 'About', component: () => import('../views/About.vue'), meta: { title: '关于' } }
然后全局前置组件组件
beforeEach
中探测探测要进入的组件是否有meta信息router.beforeEach((to, from, next) => { to.meta && setTitle(to.meta.title) // 有则调用工具类方法修改标题 }
6、页面的切换动画
如果想要页面在切换是有过渡效果,可以设置
以下举例
为想要过渡效果的视图设置
transition-group
被包裹<transition-group name="router"> <router-view key="default" /> <router-view name="tel" key="tel" /> </transition-group>
为
transition-group
设置name属性,用来设置css动画为每个 view 设置 key值
设置css 动画
// 页面即将加载 .router-enter { opacity: 0; } .router-enter-active { transition: opacity 1s ease; } .router-enter-to { opacity: 1; } // 页面离开 .router-leave { opacity: 1; } .router-leave-active { transition: opacity 1s ease; } .router-leave-to { opacity: 0; }
如果想为某个特定的页面添加特效,也可以采取下面的做法
5.1、将
transition-group
的name改为动态的<transition-group :name="routerTransition">
5.2、添加js代码
export default { data() { return { routerTransition: '' } }, watch: { '$route' (to) { if(to.query && to.query.transitionName){ this.routerTransition = to.query.transitionName } } } }
5.3、这样在url中路劲带有query参数的
transitionName=query
的组件,就拥有切换动画了