Vue学习-07：路由监听、路由嵌套（子路由）

1、路由监听 - watch

[code]    window.onload = function() {
let r1 = new VueRouter({
routes: [{
path: '/user/:id',
component: {
template: '<div>当前用户的ID：{{$route.params.id}}</div>'
}
}]
})
let vm = new Vue({
el: '#div1',
router: r1,
watch: {
'$route' (newVal, oldVal) {  //注意两个参数的位置
alert(`路由从${oldVal.params.id}变成了${newVal.params.id}`)
}
}
})
}

[code]    <div id="div1">
<router-link to="/user/1234">用户1</router-link>
<router-link to="/user/5678">用户2</router-link>
<router-link to="/user/9101">用户3</router-link>
<router-view></router-view>
</div>

知识点：

主要是注意 watch 参数的前后顺序

2、路由监听 - beforeRouteUpdate

[code]    window.onload = function() {
let r1 = new VueRouter({
routes: [{
path: '/user/:id',
component: {
template: '<div>当前用户的ID：{{$route.params.id}}</div>',
beforeRouteUpdate(to, from, next) {
console.log(to)
console.log(from)
next()    //不写next(),路由将不往下执行，反之亦然
}             //beforeRouteUpdate 是组件 component 里的参数
}
}]
})
let vm = new Vue({
el: '#div1',
router: r1
})
}

[code]    <div id="div1">
<router-link to="/user/1234">用户1</router-link>
<router-link to="/user/5678">用户2</router-link>
<router-link to="/user/9101">用户3</router-link>
<router-view></router-view>
</div>

知识点：钩子函数…

3、路由嵌套（子路由）

[code]    window.onload = function() {
let r1 = new VueRouter({
routes: [{
path: '/user/:id',
component: {
template: `
<div>
<h2>当前用户的ID：{{$route.params.id}}</h2>
<router-view></router-view>
</div>`                           //注意子路由的渲染容器
},
children: [{  //子路由也是数组             //children 是 routes 的参数
path: 'info',
component: {
template: '<div>用户信息</div>'    //有且只有一个顶级元素
}
}, {
path: 'msg',                          //子路由path,注意无 /
component: {
template: '<div>修改密码</div>'
}
}]
}]
})
let vm = new Vue({
el: '#div1',
router: r1
})
}

[code]    <div id="div1">
<router-link to="/user/111/msg">用户1-修改密码</router-link>
<router-link to="/user/111/info">用户1-完善信息</router-link>
<router-link to="/user/222/msg">用户2-修改密码</router-link>
<router-link to="/user/222/info">用户2-完善信息</router-link>
<router-view></router-view>
</div>

知识点：（路由对象）

1、path                        匹配路由路径，可以带参数（：id）；

     component              路由的主体

          template             路由的内容，包含有且只有一个顶级元素

          beforeRouteUpdale       路由监听

     children                   子路由