基础的完整sample(戳这里)
对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象:
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
编程式的vue-router操作:
- router.push(location)
- router.replace(location)
- router.go(n)
命名路由 在routes数组配置中添加name键值对,
// 参数配置
const router = new VueRouter({
routes: [
{
path: '/user/:userId',
name: 'user',
component: User
}
]
})
// 链接到该路由的方法
// 1.<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
// 2.router.push({ name: 'user', params: { userId: 123 }})
命名视图 同时(同级)展示多个视图时候,如sidebar header main ……,我们需要同级路由,请注意下面是components(不是component)参数
// template 定义
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
// routes参数定义
const router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Foo,
a: Bar,
b: Baz
}
}
]
})
重定向 _redirect_参数在routes配置中可接受为字符串、命名对象、“to”函数,详情请戳这里
别名 _alias_更像是说假路由,URL变成了alias配置的值,但是视图还是path对应的component
mode 两种模式: _hash _和 history