vue动态路由传参---query传参和params传参

最新推荐文章于 2025-04-07 10:14:53 发布

原创最新推荐文章于 2025-04-07 10:14:53 发布

· 1.6k 阅读

2 ·

版权

文章标签：

#javascript #前端 #vue.js

当一个页面跳转到另一个页面时，组件结构相同，只是内容不同且地址栏后缀不同，这个地址栏的后缀就是参数，根据不同参数渲染不同的内容，这个跳转就叫路由传参。

当项目中组件间通过路由跳转,有时,我们需要传递一个组件中的参数到另一个组件中使用,那么我们此时就不能够靠组件间直接传递数据,只能通过路由导航传参

路由传参有两种方式:query传参和params传参

1.query传参

参数会显示到地址栏中,类似get请求,所以当刷新页面时,不会丢失数据

字符串传参

在路径后面通过？拼接传递的参数，有点类型接口中的get请求

<router-link to="/login?username=张三">登录</router-link>

传递参数（搭配name）

传递的参数在query对象中

<router-link :to="{name:'login',query:{username:'张三'}}">登录</router-link>

传递参数（搭配name）

传递参数在query对象中

<router-link :to="{path:'/login',query:{username:'张三'}}">登录</router-link>

举个项目的栗子😃（有一个文章列表，点击每一篇文章，路由跳转带上相应的文章id,跳转相应页面通过$route.query.id获取文章id发起请求获取文章内容）

设置路由：

{
path:'/detail',
compoment:articleDetail
}

点击某一篇文章实现跳转到这个匹配路由上

  clickFn (id) {
      console.log(123)
      // 点击实现路由切换
      this.$router.push({
        path: `/detail?aid=${id}`
      })
    }

跳转到这个路由一般需要根据你这个参数调用接口获取这个文章详情内容

封装接口：

export const articleDetailAPI = ({ id }) => {
  return request({

    url: `/v1_0/articles/${id}`,
    method: 'GET'

  })
}

调用这个接口获取数据

  async created () {
    // 页面一开始获取文章详情内容
    const res = await articleDetailAPI({
      id: this.$route.query.aid
    })
    console.log(res)
  }

❗❗❗注意：获取参数的时候是$route.query 而不是$router 这很重要！！！

$ router是用来操作路由的，$ route是用来获取路由信息的。

2.params传参

路由路径不配置占位符！！！！

刷新页面,会丢失数据,因为数据没有存在地址栏中,每次组件加载前都会销毁

只能使用对象+name传参

<router-link :to="{name:'login',params:{username:'张三'}}">登录</router-link>

路由路径中配置占位符！！！！

刷新页面,数据不会丢失,因为参数拼接到了路径中,组件不会销毁重新加载,只是改变组件中的数据

 let router = new VueRouter({
        routes:[{
            name:'login',
            path:'/login/:username',   //配置属性
            component:LoginComponent
        }]
    })

字符串传参

路径拼接：/后边直接写参数

<router-link to="/login/张三">登录</router-link>

对象传参（搭配name）

<router-link :to="{name:'login',params:{username:'张三'}}">登录</router-link>

对象传参（搭配path）

<router-link :to="{path:'/login/zs'}">登录</router-link>

每个人都有自己喜欢的传递方式。

我比较喜这种写法：

//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
                          })

// 需要对应路由配置如下：
 {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }
//获取参数方法
this.$route.params.id

❗但这种情况项目中不能这么写，会有问题

this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
        })
// 路由配置：

  {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

//获取参数
this.$route.params.id

❗❗❗在路由配置中可以添加:/id 也可以不添加，添加数据会在url后面显示，不添加数据就不会显示，如果不添加刷新页面会出现一个致命的问题，数据会发生丢失（刷新页面,会丢失数据,因为数据没有存在地址栏中,每次组件加载前都会销毁）