简单回顾一下vue基础部分
- 动态路由匹配
- 路由配置方法
export default new Router({ routes: [ { path: '/router01/:name', name: 'RainRouter01', component: RainRouter01 } ] })
- 路由参数获取方式
<template> <div>{{$route.params.name}}</div> </template>
- 路由配置方法
- 嵌套路由
- 在
VueRouter
的参数中使用children
配置children: [ { path: 'Child01', name: 'Child01', component: Child01 }, { path: 'Child02', name: 'Child02', component: Child02 } ]
注意: 其parent的 template 必须有<router-view>标签
- 在
- 路由导航
- 声明式: 通过<router-link to:>标签的to属性
- 编程式:
- router.push()
- router.replace()
- go()
- 命名路由
- 在路由上添加name属性
-
<router-link :to="{ name: 'child01', params: { name:child01}}">User</router-link>
或者
-
router.push({ name: 'child02', params: { name: child02 }})
的方式 为路由传递参数
- 命名视图
-
<router-view></router-view> <router-view name="child"></router-view> <router-view name="b"></router-view
{ path: '/', components: { default: Foo, a: Bar, b: Baz } }
-
通过视图的name 属性完成同一个路由下的多个组件 注意:components 而不是component
-
- 重定向和别名
- 重定向 通过配置 redirect实现
- 别名 通过alias 属性实现
现在开始进阶方面的讲解
- 导航钩子
-
beforeRouteEnter beforeRouteUpdate (2.2 新增) beforeRouteLeave
每个钩子函数都有三个参数
to: Route: 即将要进入的目标 路由对象 from: Route: 当前导航正要离开的路由 next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。 next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。 next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。