Vue页面跳转和路由间参数传递接收（含动态路由和嵌套路由）

Vue页面跳转和路由间参数传递接收（含动态路由和嵌套路由）
一，Vue页面跳转：

   1，直接修改地址栏的地址或者a标签就行外部跳转；
   2，Html跳转：
          <router-link  to=""> a标签，to为href </router-link>
          <router-view> 匹配路由组件的出口 </router-view>  
   3，JS跳转：
          this.$router.push('路由地址')
          this.$router.replace{path：‘/’ } 
          this.$router.go(-sum)  // 后退几步

注：将路由挂载到vue实例中时，给vue实例化对象挂载了两个对象：

      this.$router（VueRouter）
      this.$route（配置路由信息的对象）

二，路由参数传递和接收：
1，配置路由传参： 【#/describe/22】

   父组件携带参数进行路由跳转：
          getDescribe(id) {
              this.$router.push({
                  path: `/describe/${id}`,
              })
          }
     路由配置：
     {
        path: '/describe/:id',
        name: 'Describe',
        component: Describe
     }
     子组件接收参数：  this.$route.params.id

2，通过params传递参数 【#/describe 参数被隐藏】

 父组件：通过路由属性中的name来确定匹配的路由，通过params来传递参数
   this.$router.push({
       name: 'Describe',
       params: {
         id: id
       }
   })
   // 路由正常配置即可
   // 配置时：添加:/id 也可以不添加，不添加数据会在url后面显示，不添加数据就不会显示
 子组件接收参数：  this.$route.params.id

3，通过query来传递参数 【#/describe?id=22】

  父组件：使用path来匹配路由，然后通过query来传递参数；这种情况下 query传递的参数会显示在url后面?id=？
      this.$router.push({
           path: '/describe',
           query: {
             id: id
           }
       })
      // 路由正常配置
  子组件接收参数：  this.$route.query.id

4，动态路由，不同路由的传值

 1）配置动态路由：
        routes:[
           //动态路径参数，以冒号开头   
           { path:’/user/:id’, component:User }
        ]
   2）在对应页面获取动态路由的值： this.$route.params
   3）动态的跳转： <router-link :to=” ‘/user/’ + key ”></router-link>  
   4）get传值：
            <router-link :to=” ’/user?id=’ + key ”></router-link>
            获取： this.$route.query

5，路由嵌套
如果一个SPA中的某个页面，根据不同的地址，嵌套其它的组件，称之为路由嵌套，而VueRouter是支持路由嵌套。
①在准备嵌套其它组件的组件中，指定一个容器
举例：比如order组件中准备嵌套Step1\Step2\Step3，在order组件的模板中 指定一个router-view
②设置准备嵌套其它组件的路由地址
order组件准备嵌套，就需要在order组件的路由地址中添加一个children的属性
{
path:’/order’,
component:OrderConfirmComponent,
children:[
{path:’’,component:},
{path:‘step1’,component:}
]
}