vue路由传递参数的几种方式详解

Posted 2023-04-08 还是大剑师兰特

vue-router传递参数分为两大类：

编程式的导航 router.push
声明式的导航

编程式导航

1）编程式导航传递参数有两种类型：字符串、对象。

字符串

字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数：
this.$router.push(“home”);

对象

想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数，下面分别说明两种方式的用法和注意事项。

命名路由
命名路由的前提就是在注册路由的地方需要给路由命名如：

命名路由传递参数需要使用params来传递，这里一定要注意使用params不是query。目标页面接收传递参数时使用params。特别注意：命名路由这种方式传递的参数，如果在目标页面刷新是会出错的

使用方法如下：
this.$router.push( name: ‘news’, params: userId: 123 )
代码如下：

<template>
  <div class="hello">
    <h1> msg </h1>
    <button @click="routerTo">click here to news page</button>
  </div>
</template>
<script>
export default 
  name: 'HelloWorld',
  data () 
    return 
      msg: 'Welcome to Your Vue.js App'
    
  ,
  methods:
    routerTo()
      this.$router.push( name: 'news', params:  userId: 123 );
    
  

</script>
 
<style>
</style>
 
接受传递的参数：
<template>
  <div>
    this is the news page.the transform param is this.$route.params.userId
  </div>
</template>
<script>
  
</script>

查询参数
查询参数其实就是在路由地址后面带上参数和传统的url参数一致的，传递参数使用query而且必须配合path来传递参数而不能用name，目标页面接收传递的参数使query。
注意：和name配对的是params，和path配对的是query
使用方法如下：
this.$router.push( path: ‘/news’, query: userId: 123 );
代码如下：

<template>
  <div class="hello">
    <h1> msg </h1>
    <button @click="routerTo">click here to news page</button>
  </div>
</template>
<script>
export default 
  name: 'HelloWorld',
  data () 
    return 
      msg: 'Welcome to Your Vue.js App'
    
  ,
  methods:
    routerTo()
      this.$router.push( path: '/news', query:  userId: 123 );
    
  

</script>
<style>
</style>
 
接收参数如下：
<template>
  <div>
    this is the news page.the transform param is this.$route.query.userId
  </div>
</template>
<script>
</script>

运行效果如下：

声明式的导航

字符串
<router-link to="news">click to news page</router-link>
命名路由
<router-link :to=" name: 'news', params:  userId: 1111">click to news page</router-link>
查询参数
<router-link :to=" path: '/news', query:  userId: 1111">click to news page</router-link>

最后总结：路由传递参数和传统传递参数是一样的，命名路由类似表单提交而查询就是url传递，在vue项目中基本上掌握了这两种传递参数就能应付大部分应用了，最后总结为以下两点：
1.命名路由搭配params，刷新页面参数会丢失
2.查询参数搭配query，刷新页面数据不会丢失
3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

Vue路由传参的几种方式

原

Vue路由传参的几种方式

2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613

 

前言：顾名思义，vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效。传参方式可以划分为params传参和query传参，params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。

参考官网：https://router.vuejs.org/zh/guide/essentials/navigation.html

params传参（url中显示参数）

• 文件结构

• 定义路由：在定义path路由路径时定义参数名和格式，如  path: "/one/login/:num" ，router>index.js文件如下

1.  
   /* eslint-disable*/
2.  
    
3.  
   //第一步：引用vue和vue-router ，Vue.use（VueRouter）
4.  
   import Vue from ‘vue‘
5.  
   import Router from ‘vue-router‘
6.  
   Vue.use(Router)
7.  
    
8.  
   //第二步：引用定义好的路由组件
9.  
   import ChildOne from ‘../components/childOne‘
10.  
    import ChildTwo from ‘../components/childTwo‘
11.  
    import Log from ‘../components/log.vue‘
12.  
    import Reg from ‘../components/reg.vue‘
13.  
     
14.  
    //第三步：定义路由（路由对象包含路由名、路径、组件、参数、子路由等），每一个路由映射到一个组件
15.  
    //第四步：通过new Router来创建router实例
16.  
    export default new Router(
17.  
    mode: ‘history‘,
18.  
    routes: [
19.  
20.  
    path: ‘/one‘,
21.  
    name: ‘ChildOne‘,
22.  
    component: ChildOne,
23.  
    children:[
24.  
25.  
    path:‘/one/log/:num‘,
26.  
    component:Log,
27.  
    ,
28.  
29.  
    path:‘/one/reg/:num‘,
30.  
    component:Reg,
31.  
    ,
32.  
    ],
33.  
    ,
34.  
35.  
    path: ‘/two‘,
36.  
    name: ‘ChildTwo‘,
37.  
    component: ChildTwo
38.  
39.  
    ]
40.  
    )

• 在父路由组件上使用router-link进行路由导航，传参用<router-link to="/one/login/001">的形式向子路由组件传递参数。使用router-view进行子路由页面内容渲染，父路由组件childOne.vue 如下：

1.  
   <template>
2.  
   <div style="border:1px solid red;color:red;">
3.  
   <p>这是父路由childOne对应的组件页面</p>
4.  
   <p>下面可以点击显示嵌套的子路由 </p>
5.  
   <router-link to="/one/log/123">显示登录页面</router-link>
6.  
   <router-link to="/one/reg/002">显示注册页面</router-link>
7.  
   <router-view></router-view>
8.  
   </div>
9.  
   </template>

• 子路由通过 this.$route.params.num 的形式来获取父路由向子路由传递过来的参数，子路由组件login.vue如下：

1.  
   <template>
2.  
   <div style="border:1px solid orange;color:orange;">
3.  
   <p>登录界面：这是另一个嵌套路由的内容</p>
4.  
   <h3>this.$route.params.num</h3>
5.  
   </div>
6.  
   </template>

效果：

注意：如上所述路由定义的path: "/one/login/:num"路径和to="/one/login/001"必须书写正确，否则不断点击切换路由，会因为不断将传递的值显示添加到url中导致路由出错，如下

传递的值存在url中存在安全风险，为防止用户修改，另一种方式不在url中显示传递的值

 

params传参（url中不显示参数）

• 定义路由时添加name属性给映射的路径取一个别名，router>index.js文件修改router如下：

1.  
   export default new Router(
2.  
   mode: ‘history‘,
3.  
   routes: [
4.  
5.  
   path: ‘/one‘,
6.  
   name: ‘ChildOne‘,
7.  
   component: ChildOne,
8.  
   children:[
9.  
10.  
    path:‘/one/log/‘,
11.  
    name:‘Log‘,
12.  
    component:Log,
13.  
    ,
14.  
15.  
    path:‘/one/reg/‘,
16.  
    name:‘Reg‘,
17.  
    component:Reg,
18.  
    ,
19.  
    ],
20.  
    ,
21.  
22.  
    path: ‘/two‘,
23.  
    name: ‘ChildTwo‘,
24.  
    component: ChildTwo
25.  
26.  
    ]
27.  
    )

• 在父路由组件上使用router-link进行路由导航，使用   <router-link :to="name:‘home‘,params:id:001>    形式传递参数。注意   ‘: to= ‘ 前面的冒号，childOne.vue组件修改如下：

1.  
   <template>
2.  
   <div style="border:1px solid red;color:red;">
3.  
   <p>这是父路由childOne对应的组件页面</p>
4.  
   <p>下面可以点击显示嵌套的子路由 </p>
5.  
   <router-link :to="name:‘Log‘,params:num:666">显示登录页面</router-link>
6.  
   <router-link :to="name:‘Reg‘,params:num:888">显示注册页面</router-link>
7.  
   <router-view></router-view>
8.  
   </div>
9.  
   </template>

• 子路由组件页面获取父路由传参方式不变，reg.vue 文件如下：

1.  
   <template>
2.  
   <div style="border:1px solid orange;color:orange;">
3.  
   <p>登录界面：这是另一个嵌套路由的内容</p>
4.  
   <h3>子路由获取的参数：this.$route.params.num</h3>
5.  
   </div>
6.  
   </template>

 

注意：上述这种利用params不显示url传参的方式会导致在刷新页面的时候，传递的值会丢失；

 

 

使用Query实现路由传参

• 定义路由 router>index.js文件如下：

1.  
   export default new Router(
2.  
   mode: ‘history‘,
3.  
   routes: [
4.  
5.  
   path: ‘/one‘,
6.  
   name: ‘ChildOne‘,
7.  
   component: ChildOne,
8.  
   children:[
9.  
10.  
    path:‘/one/log/‘,
11.  
    component:Log,
12.  
    ,
13.  
14.  
    path:‘/one/reg/‘,
15.  
    component:Reg,
16.  
    ,
17.  
    ],
18.  
    ,
19.  
20.  
    path: ‘/two‘,
21.  
    name: ‘ChildTwo‘,
22.  
    component: ChildTwo
23.  
24.  
    ]
25.  
    )

• 修改路由导航 <router-link :to="path:‘/one/log‘,query:num:123"> ，childOne.vue 文件修改如下：

1.  
   <template>
2.  
   <div style="border:1px solid red;color:red;">
3.  
   <p>这是父路由childOne对应的组件页面</p>
4.  
   <p>下面可以点击显示嵌套的子路由 </p>
5.  
   <router-link :to="path:‘/one/log‘,query:num:123">显示登录页面</router-link>
6.  
   <router-link :to="path:‘/one/reg‘,query:num:999">显示注册页面</router-link>
7.  
   <router-view></router-view>
8.  
   </div>
9.  
   </template>

• 子路由组件通过 this.$route.query.num 来显示传递过来的参数，reg.vue 文件如下：

1.  
   <template>
2.  
   <div style="border:1px solid purple;color:purple;">
3.  
   <p>注册界面：这是二级路由页面</p>
4.  
   <h3>this.$route.query.num</h3>
5.  
   </div>
6.  
   </template>

效果如下：

 

 

PS: 在第一步的定义路由中我们都使用了mode：history 作用就是去除路由跳转时路由路径前的 “#”

常用的mode模式有两种：

默认为hash模式，最明显的标志是，URL上有#号 localhost:8080/#/，路由会监听#后面的信息变化进行路由匹配

另一种为history模式，不会有#出现，很大程度上对URL进行了美化。需要**注意**history模式在打包后的路由跳转需要服务器配合

默认不使用mode：history 如下