vue-router -- 基本配置

基础的完整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