1、 动态路由匹配
比如：（动态路由的高级匹配）
https://github.com/vuejs/vue-router/blob/next/examples/route-matching/app.js
2、 编程式导航
（1）router.push(…)
使用router.push(…)【等同于<router-link to=”…”>(声明式)】创建，这个方法回向history栈中添加一个新的记录，当用户点击浏览器后退的时候，则返回之前的url
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。
比如：
// 字符串
router.push(‘home‘)
// 对象
router.push({ path: ‘home‘ })
// 命名的路由
router.push({ name: ‘user‘, params: { userId: 123 }})
// 带查询参数，变成 /register?plan=private
router.push({ path: ‘register‘, query: { plan: ‘private‘ }})
（2）router.replace(location)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录
（3）router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
比如：
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
3、 命名路由
命名路由使用的是：（注意：前面要记得加上一个：）
<li><router-link :to="{ name: ‘nameRoute‘}">命名路由</router-link></li>
<li><router-link :to="{ name: ‘namerouterone‘, params: { id: 123 }}">命名路由代参</router-link></li>
4、 命名视图：
{
path: ‘/nameview/child‘,
components: {
default: nameviewone,
a: nameviewtwo,
b: nameviewthree
}
}
5、 重定向
将一个页面重定向到另一个页面上
比如：https://github.com/vuejs/vue-router/blob/next/examples/redirect/app.js
重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b：
constrouter =newVueRouter({
routes: [{ path:‘/a‘, redirect:‘/b‘}
]})重定向的目标也可以是一个命名的路由：
constrouter =newVueRouter({
routes: [{ path:‘/a‘, redirect: { name:‘foo‘}}
]})甚至是一个方法，动态返回重定向目标：
constrouter =newVueRouter({
routes: [{ path:‘/a‘, redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象|
const { hash, params, query } = to |
|
if (query.to === ‘foo‘) { |
|
return { path: ‘/foo‘, query: null } |
|
} |
|
if (hash === ‘#baz‘) { |
|
return { name: ‘baz‘, hash: ‘‘ } |
|
} |
|
if (params.id) { |
|
return ‘/with-params/:id‘ |
|
} else { |
|
return ‘/bar‘ |
|
} |
}} ]})6、 别名
是可以将一个页面的path名字，改成当前的。
比如：
这里将路径为”/foo”的component改为alias的，原本的就被替换掉了
{
path: ‘/alias‘,
component: "alias",
alias: "/foo"
},
更多笔记，待更新~