const {...query} = this.$route.query;
// 替换新query
this.$router.replace({query: {...query, uid}});
内容参考
解决Vue Router给当前URL添加动态query无反应的问题_weixin_34268610的博客-CSDN博客
最近遇到这么一个问题，就是想在当前url上添加一个动态的query传参。听上去非常简单的一个功能，但是遇到的问题是很让人头大的。一开始我的思路是这样的let path = this.$route.path;let query = this.$route.queryquery.a = 'abc';let location = { ...
https://blog.csdn.net/weixin_34268610/article/details/88795452
最近遇到这么一个问题，就是想在
当前
url
上添加一个
动态
的
query
传参。听上去非常简单的一个功能，但是遇到的问题是很让人头大的。一开始我的思路是这样的
let path = this.$route.path;
let
query
= this.$route.
query
query
.a = 'abc';
let location = {
就可以
修改
了
但是当已有
query
对象里面
修改
其中一个值，就会发现虽然this.$route.
query
发生改变但是浏览器的
url
上的参数并没有发生变化， 尝试将已有的参数进行深拷贝突然发现就可以了
let new
Query
= JSON.parse(JSON.stringify(this.$route.
query
));
new
Query
.index = 2;
import App from './App.vue'
import VueRouter from '
vue-router
'
import router from './router'
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
简单来说，导航守卫就是路由跳转前、中、后过程中的一些钩子函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。
官方解释，
vue-router
提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
2、导航守卫分类
导航守卫分为：全局的、组件内的、单个路由独享三种
2.1 全局的
指路由实例上直接操作的钩子函数，他的特点是所有配置路由的组件都会触发
const router = new VueRouter({ ... })
router.beforeEach((to, from, next
当时检查自己的代码，没有发现请求的地址带’#’，当时也很纳闷，但是由于没有影响页面的渲染以及向后台发送请求，当时也没有在意。最近看了一下
vue-router
的实现原理，才逐渐揭开了这个谜题。
vue-router
的两种方式（浏览器环境下）
1. Hash （对应HashHistory）
hash（“#”）符号的本来作用是加在
URL
中指示网页中的位置：
http://www.example.com/index.html#print
#符号本身以及它后面的字符称之为hash(也就是我之前为什么地址栏都
我们可以把vue 的组件分为两种, 一种是一般组件, 一种就是路由组件
使用的时候, 我们都是手写 它的标签来使用的 比如我们会引入component 使用时会写明<VueComponetXXXX></VueComponentXXX>
我们一般会在 router.js中定义路由组件, 为它配置pat
Vue-router
可以通过在路由配置中添加 `path: '*'` 的路由规则来实现空页面跳转。需要注意的是，这种规则应该放在路由配置的最后，因为它会匹配所有未匹配的路由。
const router = new VueRouter({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
// 路由重定向
{ path: '*', redirect: '/' }
这里的 * 就是所有未被匹配的路由，就会被重定向到 '/'
