Vue路由获取路由参数 | 获取URL参数

原创已于 2023-06-26 09:52:34 修改

· 1.2k 阅读

0 ·

版权

文章标签：

#前端 #javascript #vue.js

于 2023-05-08 13:28:15 首次发布

文章介绍了在Vue中设置路由参数的两种方式，通过query和params。query参数会显示在URL中，如/login?id=1，而params参数则嵌入路径，如/register/San。使用params时需预先在路由配置中定义。同时，文章还提供了获取这两种参数的方法以及解析加密参数的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue路由设置路由参数有2种方式：

1.通过query配置：

<router-link :to="{ name:'login',query:{id:1} }">登录</router-link>
//通过query配置的路径显示如下：.html#/login?id=1

2.通过params配置：

<router-link :to="{ name:'register',params:{'name':'San'} }">注册</router-link>
//通过params配置的路径显示如下：.html#/register/San

通过该方法配置的参数，需要在配置路由的时候给参数留个坑，如下图：

3.获取路由参数的方法：

1.通过query配置的：this.$route.query

2.通过params配置的：this.$route.params

获取加密的路由参数 const params = JSON.parse(this.$Base64.decode(this.$route.query.params.toString()))

// 获取url参数
function getUrlsParams(url) {
  console.log(url, 'url')
  const temp1 = url.split('?')
  const pram = temp1[1]
  const keyValue = pram.split('&')
  const obj = {}
  for (let i = 0; i < keyValue.length; i++) {
    const item = keyValue[i].split('=')
    const key = item[0]
    const value = item[1]
    obj[key] = value
  }
  return obj
}