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 配置：