路由嵌套

什么叫路由嵌套？

所谓的路由嵌套，其实就是路由之间包含子路由

---

一般我们都会把包含路由的设置单独定义在一个router.js文件里。常见的类型就如下所示：

1、定义路由一般都包含path（路由的路径）、component（对应组件的名字，一般为引入组件的定义的名字）、name（一般为组件定义一个名字，常用于路由跳转，推荐使用）

 {
      path: "/",
      component: H,
      name: "Home"
    }

2、路由也是可以传参。如下所示，包含？代表是可选的。例：/list/3  3就为对应的id值；/list/2/car  car就回自动分配给nam。但是可选参数一般在路由的最后

 {
      path: "/list/:id/:name?", // 路由传参,传递参数id, :name? 表示此为可选参数
      component: D,
      name: "Detail"
    },

3、重点强调子路由（children）。路由是可以嵌套多层的，查找的时候为/user/info/address，就能对应查找到地址的页面。要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

   {
      path: "/user",
      component: U,
      name: "User",
      children: [
        // 子路由,路由嵌套
        {
          path: "info",
          component: UI,
          name: "UserInfo",
          children: [
            {
              path: "address",
              component: UA,
              name: "UserAddress"
            }
          ]
        }
      ]
    }

ps：当设置user时的路径为/user/:id，想要访问/user/foo的路径是要怎样设置？会出现没有匹配到合适的界面，此时，需要做的是设置一个空的子路由。

 {
      path: '/user/:id', component: User,
      children: [
        // 当 /user/:id 匹配成功，
        // UserHome 会被渲染在 User 的 <router-view> 中
        { path: '', component: UserHome },

        // ...其他子路由
      ]
    }

---

当然在页面跳转的时候也是可以传对应的参数。常用的router-link，结合to进行跳转，可以用path，也可以用name跳转

 <router-link :to="{
      path: '/'
    }">【首页】</router-link>
//  name: 'List'用name跳转的时候，名字是单引号

讲到这一部分，就需要大家了解一点知识。详情请参考官网

对于query和params来说还有有一定的区别的：

1、query来说，在路由时的形式为/list?c=mobile   在路由设置里面直接写/list

2、params来说，在路由时的形式为/list/3/小明   在路由设置的形式为/list/:id/:name

 <router-link :to="{
      name: 'List',
      query: {
        c: 'mobile'
      }
    }">【列表】</router-link>
    <router-link
      :to="{
      name: 'Detail',
      params: {
        id: '3',
        name: '小明',
        age: 18,
    }"
    >【详情页--1】</router-link>

---

编程式路由跳转

export default {
  methods: {
    pageTo(routeName) {
      // 编程式路由路由跳转
      this.$router.push({
        name: routeName
      });
    }
  }
};

query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。注意，这里获取用的是$route

　query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

query:        

params:    

参考：https://www.cnblogs.com/lulianlian/p/7682790.html