vue-cli项目中this.$router.push传参的各种方式和接受参数

1、必须在router/index.js中配置

这里有三个参数，后面跳转需要用到：

1、path：跳转路径

2、name：跳转的名字

3、component：组件名字

2、跳转 :this.$router.push({key1:'/xx/xx',key2: {id:'1'}}); key1：可以写2个值

name：根据路由配置中的name属性查找，进行跳转。值必须是路由配置的name对应的 path：根据路由配置的path属性查找，如果path错误，则根据路由配置的name查找进行跳转。值可以是路由配置的path，也可以是路由配置的name key2：可以写2个值

query：类似于get方法，把参数拼接在浏览器上面，通过this.$route.query获取值，获取一次值后，刷新浏览器值还在。 params：类似于post方法，参数没有拼接在浏览器上，通过this.$route.params获取值，跳转过去后能获取到值，刷新后就失效了。

所以排列组合后共四种形式

name只需要输入路由名字即可,不需要输入“\”

this.$router.push({name:'/xx/xx',query: {id:'1'}}); this.$router.push({name:'/xx/xx',params: {id:'1'}});this.$router.push({path:'/xx/xx',query: {id:'1'}});`` this.$router.push({path:'/xx/xx',params: {id:'1'}}); 同理，使用router-link标签也是一样的

<router-link :to="{key1:''Message'',key2:{id:'1'}}">XXX</router-link>

Vue路由传参详解（params 与 query）

前言：

路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求，params 传过去的参数不会显示在地址栏中（但是不能刷新）。params 只能配合 name 使用，如果提供了 path，params 会失效。 query 传参类似于网络请求中的 get 请求，query 传过去的参数会拼接在地址栏中（?name=xx）。query 较为灵活既可以配合 path 使用，也能配合 name 使用（亲测可用）。

name是什么呢？name 是配置路由时给 path 取的别名，方便使用。但要注意的是 “地址栏显示的路径始终是 path 的值”

const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  }
]

name 最重要的一点就是配合 params 进行路由的参数传递。我们来看一个列子：当我们登录之后我们需要把用户名带到主页进行展示。当然方法有许多比如localStorage，sessionStorag，中央事件总线bus，但我们这里需要学习路由传参。

• 方式一：通过 params 传参

• • - - 编程式：
    
      - - data:{
          username: ''
          },
          login() {
          ...
          this.$router.push({
          name: 'home', //注意使用 params 时一定不能使用 path
          params: { username: this.username },
          })
          }
    
    
    
    - - 声明式：
    
      - - <router-link :to="{ name: 'home', params: { username: username } }">
    
    
    
    - - 取值：`this.$route.params.username
    

• 方式二：通过 query 传参

• • - - 编程式：
    
      - - data:{
          username: ''
          },
          login() {
          ...
          this.$router.push({
          path: '/home',
          query: { username: this.username },
          })
          }
    
    
    
    - - 声明式：
    
      - - <router-link :to="{ path: '/home', query: { username: username } }">
    
    
    
    - - 取值：`this.$route.query.username
    

params 传参后，刷新页面会失去拿到的参数。所以路由参数要修改为 '/login/:username'（官方称为动态路由）

const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home/:username',
    name: '/home',
    component: Home
  }

但是这样就不会类似于 post 请求，他会把接收到的参数替换作为地址。

假如传入参数为：params: { username: 'admin'}，那么最终访问的地址为：http://localhost:8080/home/admin

总结

• 通过登录的例子来看，如果用户名不是敏感信息，可以直接放在地址栏中（使用query参数）
• 为什么不用params传参？由于 params 传参不能刷新。或满足刷新需求，但要对地址进行修改，用户名一样会显示在地址栏中