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

一，Vue页面跳转：

   1，直接修改地址栏的地址或者a标签就行外部跳转；

   2，Html跳转：

          a标签，to为href
          匹配路由组件的出口  

   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）动态的跳转：   

       4）get传值：

               

                获取： 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:**}
                ]
            }