vue路由传参及获取参数的方式总结

2023-05-25 09:25:11 作者：kksw1121

这篇文章主要介绍了vue路由传参及获取参数的方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue路由传参及获取参数方式

动态路由（这里用来测试，传了两个参数username和post_id）

//路由配置
{
      path: '/user/:username/:post_id',
       name: 'User',
       component: User
 }

//跳转
    this.$router.push({
          path: `/user/${username}/${post_id}`,
    })

匹配路径：/user/evan/123

传递的参数：{ username: 'evan', post_id: '123' }

//获取参数
this.$route.params.username
this.$route.params.post_id

通过路由属性中的name来确定匹配的路由，通过params来传递参数。

//路由配置
{
      path: '/user',
       name: 'User',
       component: User
 }

//js跳转
    this.$router.push({
          name: 'User',
          params: {
            id: id
          }
    })

<!--html跳转-->
<router-link :to="{name:'User',params:{id:3}}"><span>跳转</span></router-link>

js获取参数：this.$route.params.id

html获取参数： {{$route.params.id}}

使用path来匹配路由，然后通过query来传递参数，参数显示在地址栏上，并用?号和&号拼接的

//路由配置
{
      path: '/user',
       name: 'User',
       component: User
 }

//js跳转
    this.$router.push({
           path: '/user',
          query: {
            id: id
          }
    })

<!--html跳转-->
<router-link to="/user?id=1"><span>跳转</span></router-link>

js获取参数：this.$route.query.id

html获取参数： {{$route.query.id}}

在用vue做项目的时候，发现在新页面刷新后，上一页面带过来的参数会丢失，查阅资料才发现原来自己对params和query理解不透彻

下面是两种传参方法：

需要路由里加上这个参数

this.$router.push({name:'list', params:{id: id}});
routes: [
    {
      path: '/list/:id',
      name: 'list'
    }
  ]

可以通过 this.$route.params.id 来获取

this.$router.push({path: '/folder/file', query: {id: list.id, name: list.name}})

可以通过 this.$route.query.id 来获取

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。