vue中的路由2-----嵌套路由跳转，传参和路径记录问题

vue路由如何传参的问题
这篇文章分为两个部分，

1. 第一个是怎么传过去
2. 第二个是怎么接收信息

在学习之前我们要了解一下路由跳转的规则

（1）路由跳转相当于一个栈，你每跳一次就往栈添加一条数据，所以你可以按返回按钮返回到上一个页面，你也可以通过添加replace的方法，这个相当于跳转的时候，将路径记录的栈的第一条换掉成最新的一条，当你点击返回上一个页面按钮的时候就不能跳转到刚刚那个页面了

（2）跳转路由有两种不同的传参方法，一种将数据放在query上，一种放在params上，但无论哪一种，这些方法都是属于this.$router方法上的属性,我们都可以直接console.log(this.router)找到

（3）子路由跳转的时候路径要写全，不然无法跳转，如想跳转到写在aa下面的children子路由里面的bb，就应该写/aa/bb,不能直接写/bb,如下所示

（4）命名路由可以替代复杂的子路由路径，比如上面的bb,你可以命名为“bbname".这样子就可以省略跳转，如下

const router= new VueRouter({
    routes:[
       {
          path:'/aa',
          component:aa,
          children:[
              {
                  //注意子路由是可以不加斜杠的
                  //这个也可以跳转，简化路由 写 to="{name:'detailname'}"也能实现跳转
                  name:"bb",
                  path:'bb',
                  component:bb,
              },                
          ]
       }
    ]
})

1.非编程式传递方法
（1）query传递参数法

第一种是链接式的传参方法，将要传的参数拼接在链接的后面
格式为 :to="地址?id=${id}&name=${name}"

<router-link 
   :to="`/home/news/detail1?id=${id}&name=${name}`">
   query拼接式法</router-link>

第二种是将传递的数据弄成对象的形式传递过去

   <router-link 
   :to="{
     name:'/home/news/detail1',
     query:{
       id:id,
       name:name
     }
   }">
 query对象法</router-link>

（2）params传递参数法
要用这种方法必须修改一下路由文件的配置
如下 第一个意味着接收id，第二个意味着接收name

 children:[
   {
         name:"detailname2",
         //给路由添加name也可以跳转，目的是简化路由 写 to="{name:'detailname'}"也能实现跳转
         path:'detail2/:id/:name', 
         component:detail2, 
     }
 ]

第一种链接的形式
格式为:to="/home/massage/detail2/${参数}/${参数}"

<router-link 
:to="`/home/massage/detail2/${id}/${name}`">
 params拼接式法</router-link>

第二种是对象的形式，这里需要注意的是，传递 params的对象形式 不能用地址，只能用名字name进行传递

<router-link 
 :to="{
   name:'detailname2',//这里改为名字传递了
   params:{
     id:person[1].id,
     name:person[1].name
   }
 }"> params对象法 </router-link>

（3）如何变为replace跳转
直接加上replace 即可

<router-link replace to="/home/massage">replace跳转</router-link>

1.编程式传递方法

（1）query传递参数法
第一种是push跳转的方法

pushShow(m){
 this.$router.push({
    name:'detailname1',
    query:{
      id:m.id,
      name:m.name,
    }
  })
},

第二种是replace跳转的方法

replaceShow(m){
    this.$router.replace({
      name:'detailname1',
      query:{
        id:m.id,
        name:m.name,
      }
    })
  },
}

（1）query传递参数法

第一种是push跳转的方法

pushShow(m){
  this.$router.push({
    name:'detailname2',
    params:{
      id:m.id,
      name:m.name,
    }
  })
},

第二种是replace跳转的方法

replaceShow(m){
  this.$router.replace({
     name:'',
     params:{
       id:m.id,
       name:m.name,
     }
   })
 },

第二部分 如何接收信息
我们可以有最简单的信息接收方法，根据上面的介绍，所有信息都在this.$router里面，
即我们直接在this. $router获取即可

this.$route.params.name

this.$route.query.name

但是我们一般不会这样子直接引入，这样子写法太长了
props接收法

1.首先我们在组件声明一下props

export default {
  name: "detail",
  props:['id','name'],//声明接收的数据
};

2.我们在路由文件里面添加如何使用props，一般分为下面几种情况
props接收数据的写法

第一种，直接写死，接收死数据

   props:{a:1,b:'hello'}

第二种写法，声明props为true，这种方法只能接收params数据

   props:true

第三种，函数法，这种无论是params还是query都可以

   props($route){
       return {
           id:$route.query.id,
           name:$route.query.name,
       }
   }

接下来可以直接使用了