Vue入门【九】-- 动态路由和嵌套路由
♡ ‧₊˚动态路由 ₊˚ ♡
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”来达到这个效果：
一个“路径参数”使用冒号 : 标记。
User.vue
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default {
data() {
return {
msg: "用户页面",
};
}
};
</script>index.js中引入user组件：
import User from '../components/User.vue'
并注册user路由：
App.vue
当user的id 为1时：
将id手动修改为2时依旧是这个页面：
可以看到，当我们更改动态路径参数时，页面没有进行跳转，仍然是原先的这个页面。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch $route 对象，或者使用组件内部的导航守卫（后续继续介绍）:
在user.vue中data的同级位置下使用watch或生命周期钩子函数created对参数变化进行监听：
watch(to,from):第一个参数为跳转前的页面路径，第二个参数为跳转前：
watch: {
$route(to, from) {
console.log(to, from);
},
},当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：
<template>
<div>
{{ msg }} -- {{$route.params.id}}
</div>
</template>从user为3时我们再次点击User，能监听到路径变化
created:
// 监听路由参数变化获取数据
created(){
console.log(this.$route);
}
♡ ‧₊˚嵌套路由 ₊˚ ♡
在选项卡中，顶部有数个导航栏，中间的主体显示的是内容；这个时候，整个页就面是一个路由，然后点击选项卡切换不同的路由来展示不同的内容，这个时候就是路由中嵌套路由。在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？因此我们需要在VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。
实例：
在src下新建一个pages存放我们作为Column下嵌套的三个子页面。
三个页面中的内容：
我们需要实现的效果是：点击Column中的子页面便跳出对应页面的内容：
我们需要在router下的index.js中导入各个页面组件：
import Vue from 'vue'
import VueRouter from 'vue-router'
import Article from '../components/Article.vue'
import Column from '../components/Column.vue'
import onechild from '../pages/onechild.vue'
import twochild from '../pages/twochild'
import threechild from '../pages/threechild.vue'
Vue.use(VueRouter)创建路由对象数组：
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
