vue中this.$route.query和this.$route.params & query传参和params传参的使用和区别

vue中this.$route.query和this.$route.params & query传参和params传参的使用和区别

1.query传参：

路由：

 var router = new VueRouter({ 
    routes: [ { 
    path: '/login', component: login }, { 
    name:'register',path: '/register', component: register } ] }) 

导航：

 // 注意：这是 query 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象 <router-link to="/login?id=10&name=zs">登录</router-link> <router-link :to="{path:'/register',query:{id:5,name:'lili'}}">注册</router-link> 或 <router-link :to="{name:'register',query:{id:5,name:'lili'}}">注册</router-link> 等同于： this.$router.push('/login?id=10&name=zs') this.$router.push({ 
   path:'/register',query:{ 
   id:5,name:'lili'}}) 或 this.$router.push({ 
   name:'register',query:{ 
   id:5,name:'lili'}}) 

注意：jquery可以通过name或path来引入路由

2.params传参

路由：

 var router = new VueRouter({ 
    routes: [ { 
    path: '/login/:id/:name', component: login },// 这里不传入对应的参数（:/id/:name） 刷新页面 参数会消失,页面中就丢失了数据 { 
    name:'register', path: '/register/:id/:name', component: register } ] }) 

导航：

// 注意：这是 params 两种传参方式 一种是直接跳转把字符串传过去 一种是传描述目标位置的对象 <router-link to="/login/12/ls">登录</router-link> <router-link :to="{name:'register',params:{id:10,name:'lili'}}">注册</router-link> 等同于： this.$router.push('/login/12/ls') this.$router.push({ 
   name:'register',params:{ 
   id:10,name:'lili'}}) 

注意：params只能通过name来引入路由，path会undefined

jquery传参和params传参的区别

1.用法上:

1. 上文已经提到query可以用name或path来引入
2. params必需要用name来引入，接收参数都是类似的，分别是:
   this.$route.query.name和this.$route.params.name。

2.地址栏表现形式上:
query：

params：

注意：这里的12和ls 对应的是/:id/:name 这两个参数可以不写 那么就不会在地址栏上显示 不过刷新页面参数会消失 写上参数刷新页面 参数不会消失

1.query方式传参和接收参数

传参:

this.$router.push({ 
    path:'/detail/:id', query:{ 
    id:id } }) 

接收参数:

this.$route.query.id 

Tips:

传参是this.r o u t e r , 接 收 参 数 是 t h i s . router,接收参数是this.router,接收参数是this.route,这里千万要看清了！！！

2.params方式传参和接收参数

传参:

this.$router.push({ 
    name:'Detail', params:{ 
    id:id } }) 

接收参数:

this.$route.params.id 

Tips:

params传参，push里面只能是 name:‘xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

另外，二者还有点区别：

• 1. 接收参数

// query通过this.$route.query接收参数 created () { 
    const id = this.$route.query.id; } // params通过this.$route.params来接收参数 created () { 
    const id = this.$route.params.id; } 

• 1. 切换路由

// query通过path切换路由 <router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link> // params通过name切换路由 <router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>复制代码 

简单说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，浏览器刷新页面不会消失，而params相当于post请求，参数不会在地址栏中显示，浏览器刷新页面后消失。

Vue监听路由

方式一：监听$router

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象：

 watch: { 
    '$route' (to, from) { 
    // 对路由变化作出响应... } } 

方式二：唯一值 key 属性

Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可

<router-view :key="key"></router-view> computed: { 
    key() { 
    return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date() } } 

使用computed属性和Date()可以保证每一次的key都是不同的，这样就可以如愿刷新数据了。

实践

1. 定义路由

 { 
    path: '/hse/problem/prMain/deal/:id', component: () => import('@/views/hse/Problem/PrDeal.vue'), meta: { 
    keepAlive: true } }, 

2. 动态路由传参

 handleDeal(id){ 
    this.$router.push( { 
    path: `/hse/problem/prMain/deal/${ 
     id}`, params: { 
   id: id} } ) } 

3. 监听路由

 watch:{ 
    //监听路由 $route(){ 
    if(this.$route.params!==null){ 
    this.paramId = this.$route.params.id; } }, paramId(newVal,oldVal){ 
    if(newVal !== undefined && newVal !== null){ 
    //初始化数据  this.init(); } } } 

4. init方法初始化数据

methods:{ 
    //初始化数据 init(){ 
    let vm = this; vm.$nextTick(()=>{ 
    vm.$axios.get(`/hse/sim/prProblem/v1/get/${ 
     vm.dataId}`).then(reply=>{ 
    vm.form = reply.data; }).catch(e=>{ 
    vm.$toast.fail(e); }) }) } } 

实例

routes: [ // 写法 (1) { 
    //在路由中显示传递的参数  path: '/skipIn/:name/:age', //传递两个参数 name: 'SkipIn', //跳转页面的名字 component: SkipIn //注册组件 }, // 写法 (2) // {  // path: '/skipIn', // name: 'SkipIn', // component: SkipIn // } ] 

跳转之前的页面

<template> <div id="skip"> <div class="Input"> <el-form ref="form" :model="form" label-width="80px"> <el-row :gutter="20"> <el-col :span="6"> <el-form-item label="姓名:"> <el-input v-model="form.name" size="small"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="年龄:"> <el-input v-model="form.age" size="small"></el-input> </el-form-item> </el-col> </el-row> </el-form> </div> <div class="footer"> <el-button type="primary" size="small" class="skipBtn" @click="skipBtn">路由跳转</el-button> </div> </div> </template> <script> export default{ name:'RouterSkip', data(){ return{ form:{ name: "", age: "" } } }, methods:{ skipBtn: function(){ // 写法 1.如果以这种方式传递参数，那么路由的写法要以(1)为准。 // url的表现形式为(url中带参数)：http://localhost:8080/#/skipIn/小明/20 this.$router.push({ path: "/skipIn/" + this.form.name + "/" + this.form.age}); // 写法 2. 如果以这种方式传递参数，那么路由的写法要以(2)就可以了。 // url的表现形式为(url中不带参数)：http://localhost:8080/#/skipIn this.$router.push({ name: 'SkipIn', params:{name: this.form.name, age:this.form.age}}); // 注：如果以2这种方式传递参数时，那么当刷新跳转后传参的页面，数据将不存在。 // 写法 3. 如果以这种方式传递参数，那么路由的写法要以(2)就可以了。 // url的表现形式为(url中带参数)：http://localhost:8080/#/skipIn?name=小明&age=20 this.$router.push({ path: "/skipIn", query: {name: this.form.name, age:this.form.age}}); // 注：如果以1、3这种方式传递参数时，刷新跳转后传参的页面，数据还会显示存在。 } }, } </script> <style lang="scss" scoped> #skip{ width: 100%; height: 400px; background: #eee; .Input{ padding: 10px 20px; } .footer{ width: 100%; background: #ccc; padding: 5px 20px; overflow: hidden; .skipBtn{ float: right; } } } </style> 

跳转之后的页面

<template> <div id="skipIn"> <div class="header"> <span class="info">{ 
  {msg}}</span> <el-button type="primary" size="small" class="backBtn" @click="back"> 返回<i class="iconfont icon-fanhui back"></i> </el-button> </div> <div class="information">{ 
  {params}}</div> </div> </template> <script> export default{ name:'SkipIn', data(){ return{ msg: "路由传参页面", params: "" } }, methods:{ back: function(){ this.$router.go(-1); //返回 }, showInfo: function(){ // 对应写法 1. 2. 获取传过来的参数 this.params = this.$route.params.name; // 对应写法 3. 获取传过来的参数 this.params = this.$route.query.name; } }, mounted(){ this.showInfo(); } } </script> <style lang="scss" scoped> #skipIn{ width: 100%; height: 400px; background: red; .header{ width: 100%; background: #eee; padding: 5px 20px; overflow: hidden; .info{ font-size: 14px; line-height: 32px; } .backBtn{ float: right; .back{ font-size: 14px; } } } .information{ font-size: 20px; } } </style> 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10711.html