在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：
/user/aaa或者/user/bbb
除了有前面的/user之外，后面还跟上了用户的ID
这种path和Component的匹配关系，我们称之为动态路由（也是路由传递数据的一种方式）
代码写法是：

/：后面是用户名。但是现在无法显示用户的内容，因为对不上号。

做法很简单，就是在router-link下的to路径下添加用户名：

结果：

但是这个一般是动态获取的数据，

使用v-bind：to=’‘，也可以直接用语法糖

结果：

$router:是整个router对象

$routr：是出于活跃状态下的routes对象。

是众多对象中处于活跃的一个。
例如，在点击用户时，显示出用户的信息。
在User.vue中编写代码如下：

利用route的属性params去获取userId，而这个userId就是：

换言之，这个id跟配置路径的这id一一对应。
结果：

路由的懒加载

官方给出的解释：
当打包构建应用时，JavaScript包会变得非常大，影响页面加载
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
简而言之，就是在打包的时候进行了分块打包：

app.js表示当前应用程序开发的所有代码（业务代码）
manifest.js是用来为打包的代码做底层支撑的。
vendor.js是提供商第三方，比如vue

路由懒加载做什么？
路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块。只有在这个路由被访问到的时候，才加载对应的组件

懒加载的应用方式：
方式一：结合Vue的异步组件和webpack的代码分析
const Home=resolve =>{ require.ensure([’…/components/Home.vue’].()=>{resolve(require(’…/components/Home.vue’))}))
这是早期的一种方式
方式二：AMD写法
const About = resolve => require([’…/components/About.vue’],resolve);
方式三：在ES6中，我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割
const Home =() =>import(’…/components/Home.vue’)
推荐使用

代码应用，
1，定义：

const Home = () => import('../components/Home.vue');
const About = () => import('../components/About.vue');
const User = () => import('../components/User.vue');

2，应用

 {
      path: '/home',
      name: 'Home',
      // component: Home
      component:Home
    },

最后打包的时候，一个组件，对应一个js文件。

嵌套路由

嵌套路由是一个很常见的功能
比如在home页面中，我们希望通过/home/news和/home/message访问一些内容
一个路径映射一个组件，访问这两个路径也会分别渲染两个组件
实现嵌套路由有两个步骤：
创建对应的子组件，并且在路由映射中配置对应的子路由
在组件内部使用标签
步骤：
1，创建组件：

2，在路由文件下配置：

//要记得先引入
const HomeMessage = () => import('../components/HomeMessage.vue')
const About = () => import('../components/About.vue');

{
      path: '/home',
      name: 'Home',
      // component: Home
      component: Home,
      children: [
        {
          // 不加/
          path: 'news',
          component: HomeNews
        },
        {
          path: 'message',
          component: HomeMessage
        }
      ]
    },

3，在哪里使用，就在哪里用标签。比如这里是首页：

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页内容</p>
    <router-view></router-view>
  </div>
</template>

接着在哪里显示，就写到哪里。路径要写完整路径：

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页内容</p>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">信息</router-link>
    <router-view></router-view>
  </div>
</template>

子路由中的默认路由：

 {
      path: '/home',
      name: 'Home',
      // component: Home
      component: Home,
      children: [
        {
          path: '/',
          redirect: 'news'
        },
        {
          // 不加/
          path: 'news',
          component: HomeNews
        },
        {
          path: 'message',
          component: HomeMessage
        }
      ]
    },

前面不加/

传递参数的方式

两种类型：params和query
params的类型：
配置路由格式：/router/：id
传递的方式：在path后面跟上对应的值
传递后形成的路径：/router/123，/route/abc

query的类型：
配置路由格式：/router，也就是普通配置
传递的方式：对象中使用query的key作为传递方式
传递后形成的路径：/router？id=123，/router？id=abc

例子：
1，创建组件：

2，配置完之后，应用：

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png">
    <router-view/> -->
    <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about" replace>关于</router-link>
    <!-- <router-link to="/user/userId">用户</router-link> -->
    <router-link :to="'/user/' + userId">用户</router-link>
    <!-- <router-link to="/profile">另一个用户组件</router-link> -->
    <!-- 传入数据的话，必须是对象 -->
    <router-link
      :to="{
        path: '/profile',
        query: {
          name: 'tgui',
          age: 19,
        },
      }"
      >另一个用户组件</router-link
    >

    <!-- <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button> -->
    <router-view></router-view>
  </div>
</template>

然后路径上显示：

也可以用button去显示，代码如下：

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png">
    <router-view/> -->
    <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about" replace>关于</router-link>
    <!-- <router-link to="/user/userId">用户</router-link> -->
    <router-link :to="'/user/' + userId">用户</router-link>
    <!-- <router-link to="/profile">另一个用户组件</router-link> -->
    <!-- 传入数据的话，必须是对象 -->
    <router-link
      :to="{
        path: '/profile',
        query: {
          name: 'tgui',
          age: 19,
        },
      }"
      >另一个用户组件</router-link
    >

    <!-- <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button> -->
    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      userId: "lisi",
    };
  },
  methods: {
    homeClick() {
      // 通过代码的方式修改路径，vue-router
      // this.$router.push("/home");
      this.$router.replace("/home");
      console.log("homeClick");
    },
    aboutClick() {
      // this.$router.push("/about");
      this.$router.replace("/about");
      console.log("aboutClick");
    },
    userClick() {
      this.$router.push("/user/" + this.userId);
    },
    profileClick() {
      this.$router.push({
        path: "/profile",
        query: {
          name: "tgui",
          age: 19,
        },
      });
    },
  },
};
</script>