Vue学习——Router传参问题

Vue router如何传参

要点总结：
在vue-router中，有两大对象被挂载到了实例this；
$route（只读、具备信息的对象）；
$router（具备功能的函数）

查询字符串：
去哪里 ？
<router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>
导航（查询字符串path不用改）
{name:'detail',path:'/detail',组件}
去了干嘛？获取路由参数（要注意是 query ，还是 params 和 对应的 id名? 是后者需要注意设置相关文件的id规则）
+ this.$route.query.id

params、query是什么？

params：/router1/:id ，/router1/123，/router1/789 ,这里的id叫做params

query：/router1?id=123 ,/router1?id=456 ,这里的id叫做query。

 

示例：

// router的index.js写法
{
    path:'/Operater',
    children:[
      {
        path:'newOperateOne',
        component:(resolve)=>require(['@/views/newOperateOne'],resolve),
        name:'newOperateOne',
        meta:{title:'新操作1'}
      },
      {
// (\\d+) 正则表达式匹配验证；其中 /:id 该参数不是限定一个，可以写多个，如：newOperateTwo/:id/:name/:xxx
        path:'newOperateTwo/:id(\\d+)',
        component:(resolve)=>require(['@/views/newOperateTwo'],resolve),
        name:'newOperateTwo',
        meta:{title:'新操作2'}
      }
    ]
},    

// vue页面文件中跳转写法
.
.
.
<el-button @click="clickOne">query传参操作</el-button>
<el-button @click="clickTwo">params传参操作</el-button>
.
.
.
<!--router-link跳转范例，与this.$router相似-->
<router-link tag="button" to="/Operater/newOperateOne">测试跳转1</router-link>
<router-link tag="button" :to="{path:'/Operater/newOperateTwo/'+132,query:{param1:'哈哈哈',param2:'1111'}}">测试跳转2</router-link>
<router-link tag="button" :to="{name:'newOperateTwo',params:{id:321,param1:'哈哈哈',param2:'1111'}}">测试跳转3</router-link>
.
.
.
data(){
    return{
        id:123,
        testParam1:"你好",
        testParam2:456,
    }
}
// 省略不必要代码

methods:{
 clickOne(){ // query 携带参数跳转写法
// query 写法1，刷新页面 id,param1,param2,param3等携带参数数据不会丢失
    this.$router.push({path:"/Operater/newOperateOne",query:{id:this.id,param1:this.testParam1,param2:this.testParam2,param3:'哈哈哈哈',param4:xxxx,param5:xxx,......}});
// 页面地址显示
    http://localhost:8314/Operater/newOperateOne?id=123&param1=你好&param2=456&param3=哈哈哈哈&param4=xxxx&param5=xxx
},
// 获取参数
this.$route.query.id;
this.$route.query.param1;
this.$route.query.param2;
......

// query 写法2，刷新页面 id 数据不会丢失，注意地址添加ID时要在前面添加  斜杠 " / "
   this.$router.push("/Operater/newOperateTwo/"+this.id);
// 页面地址显示
    http://localhost:8314/Operater/newOperateTwo/123
// 获取参数
this.$route.params.id;

// query 写法3，刷新页面 id,param1,param2,param3等携带参数数据不会丢失，注意地址添加ID时要在前面添加  斜杠 " / "
    this.$router.push({path:"/Operater/newOperateTwo/"+this.id,query:{param1:this.testParam1,param2:this.testParam2,param3:'哈哈哈哈',param4:xxxx,param5:xxx,......}});
// 页面地址显示
    http://localhost:8314/Operater/newOperateTwo/123?param1=你好&param2=456&param3=哈哈哈哈&param4=xxxx
// 获取参数
this.$route.params.id;
this.$route.query.param1;
this.$route.query.param2;
......

 clickTwo(){ // params 携带参数跳转写法
// params 写法1，刷新页面 id,param1,param2等携带参数丢失
    this.$router.push({name:'newOperateOne',params:{id:321,param1:"哈哈哈",param2:"1111"}})
// 页面地址显示
    http://localhost:8314/Operater/newOperateOne
// 获取参数
this.$route.params.id;
this.$route.params.param1;
......

// params 写法2，刷新页面 id 数据不丢失，param1,param2等携带参数丢失
    this.$router.push({name:'newOperateTwo',params:{id:321,param1:"哈哈哈",param2:"1111"}})
// 页面地址显示
    http://localhost:8314/Operater/newOperateTwo/321
// 获取参数
this.$route.params.id;
this.$route.params.param1;
......

    },
}