当朋友们看到这个文章时想必是想要了解vue实时改变路由里参数相关的知识，这里同时多从个角度为大家介绍vue修改路由参数相应的内容。

本文内容目录一览：

• 1、(Vue-cli)三、路由传参（params参数&query参数&router和route&vue.config.js）
• 2、vue中实现刷新路由
• 3、vue 改变路由（URL）参数不刷新页面
• 4、Vue实现动态路由
• 5、vue路由传参的三种基本方式
• 6、Vue动态路由

(Vue-cli)三、路由传参（params参数&query参数&router和route&vue.config.js）

路由配置：

页面：

路由地址，采用query传参方式：?参数1=XXX参数2=XXX

params参数

query参数

插播传送门=Vue Router 的params和query传参的使用和区别（详尽）

$router返回的是当前项目中的路由器对象。

$route返回的是当前路由信息。

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

vue.config.js 是vue的配置文件，必须创建在demo根目录下，该配置文件中，只能使用commonjs模块化语法，使用module.export导出，格式如下。

@符号代表src资源目录，在vue.config.js文件中将路径解析，path.resolve是拼接路径方法。将@c定义为当前绝对路径

@c代表src目录下的components文件，@v代表src目录下的views文件，其他同理，后续在其他文件中引入文件时，只需要使用以下方法即可导入，不会随着文件目录的改变而改变。

vue中实现刷新路由

有时候有这样的场景，需要重新加载当前的页面，但不是像刷新浏览器一样刷新整个网站，那样如果有全局保存的数据（比如vuex的数据，当前页面的路由参数）就会重置，所以需要实现刷新当前路由。

实现先说一个属性： router.replace

replace 和 push 用法基本一样，但不会在浏览器留下 history 记录，就是当你使用 replace 访问的路径，通过浏览器的前进后退按钮都访问不到。

实现的方法有点投机取巧，就是建立一个空页面，通过 router.replace 访问，再从空页面使用 router.replace 跳转回来，达到刷新当前路由的效果。下面是基础实现：

先建立一个组件做空页面， refresh.vue ：

通过使用组件的路由前置守卫返回上一个页面，需要注意的是在这个守卫中访问不到 this 实例，需要通过在 next 回调中的参数代表平时的 this 。

再建立这个空页面的路由信息：

最后在你需要刷新路由的组件中的方法中访问该路径即可：

这样算是完成一个乞丐投机取巧版的刷新当前路由，这种方法是有瑕疵的，当刷新的路由带有参数， params 或者 query ，通过这个刷新方式之后参数就会丢失，所以需要将上面的方法加以改造一下，让参数页面的参数保持不变，先从需要刷新路由的组件的方法改造：

这样兼容了路由中带有 params 和 query ，先判断了当前路由是否有 params 属性，如果当前路由没有 params 和 query 属性，默认都是空对象，所以传递一个空对象跟没传是一样的。注意路由跳转传递 params 和 query 的方式不相同，传递 params 时，不能使用路由的 path ，需要用到路由 nam e属性，所以上面分了情况进行跳转。这样跳转到写好的空页面，参数是传递给 refresh 这个路由，所以需要再从这个空页面传递回来，下面是改造后的 refresh 组件：

在这个路由守卫中， to 就代表当前页面，也就是 refresh 组件

改造后这个刷新路由的方式就兼容了路由带有参数的情况，目前超人鸭遇到的需求这种方式已经能满足，如果还有其他情况需要再做处理的，或者有更好的实现方法，欢迎指教哦。

vue 改变路由（URL）参数不刷新页面

const newUrl = this.$route.path + `?id=${this.id}kjStatus=1`

window.history.replaceState('', '', newUrl)  // 会直接替换掉当前url  不会在history中留下记录

或者

window.history.pushState('', '', newUrl)   // 会在history中留下记录

Vue实现动态路由

通常我们在vue项目中都是前端配置好路由的，但在一些项目中我们可能会遇到权限控制，这样我们就涉及到 动态路由 的设置了。

动态路由设置一般有两种 ：

(1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置

(2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用

到这里，整个动态路由就可以走通了，但是页面跳转、路由守卫处理是异步的，会存在动态路由添加后跳转的是空白页面，这是因为路由在执行next()时，router里面的数据还不存在，此时，你可以通过window.location.reload()来刷新路由

后端返回的路由格式：

注意： vue是单页面应用程序，所以页面一刷新数据部分数据也会跟着丢失，所以我们需要将store中的数据存储到本地，才能保证路由不丢失。关于vue页面刷新保存页面状态，可以查看 vue如何在页面刷新时保留状态信息

vue路由传参的三种基本方式

项目中很多情况下都需要进行路由之间的传值，想过很多种方式

sessionstorage/localstorage/cookie 进行离线缓存存储也可以，用vuex也可以，不过有些大材小用吧，不管怎么说因场景而异

下面我来说下vue自带的路由传参的三种基本方式

先有如下场景 点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去

第一种方法 页面刷新数据不会丢失

需要对应路由配置如下：

可以看出需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值

另外页面获取参数如下

第二种方法 页面刷新数据会丢失

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

对应路由配置: 注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。

子组件中: 这样来获取参数

第三种方法

使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面?id=？

对应路由配置：

对应子组件: 这样来获取参数

特别注意哦，

组件中 获取参数的时候是 router 这很重要~~~

Vue动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params ，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

你可以看看这个 在线例子 。

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

除了 $route.params 外， $route 对象还提供了其它有用的信息，例如， $route.query (如果 URL 中有查询参数)、 $route.hash 等等。你可以查看 API 文档 的详细说明。

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar ， 原来的组件实例会被复用 。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。 不过，这也意味着组件的生命周期钩子不会再被调用 。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫 ：

常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配 任意路径 ，我们可以使用通配符 ( * )：

当使用 通配符 路由时，请确保路由的顺序是正确的，也就是说含有 通配符 的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。如果你使用了 History 模式 ，请确保 正确配置你的服务器 。

当使用一个 通配符 时， $route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过 通配符 被匹配的部分：

vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。查看它的 文档 学习高阶的路径匹配，还有 这个例子 展示 vue-router 怎么使用这类匹配。

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

vue实时改变路由里参数的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue修改路由参数、vue实时改变路由里参数的信息别忘了在本站进行查找喔。