Vue Router相对路径重复点击问题和传参的两种方式query和params及两者区别

该博文参考自vue官方文档
在练习vue-router的过程中发现多次点击导航栏时出现了路径连续出现的情况


点击第一次正常，点击第二次页面消失
后来发现是路径写成了相对路径

改成绝对路径就好了，加个/

<router-link :to="{path:`/other/${id}`}">Other</router-link>
{
          path: '/other/:id',
          name: 'other',
          component: () => import(/* webpackChunkName: "about" */ './views/other.vue')
        }

然后我去查阅了vue官方文档关于Vue Router 的相关知识
并查询了相关博客
发现vue中的两种导航方式：

声明式导航	编程式导航
<router-link :to="…"//>	router.push(…)

注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

同样的规则也适用于 router-link 组件的 to 属性。

展示效果：query更像ajax中get请求（会在地址栏显示参数），而params更像post方式传递（不会在地址栏显示参数）

关于$route和$router

传参是this.$router，接收参数是this.$route

$router为VueRouter实例。想要导航跳不同URL可以使用$this.router的方法（push、go、replace）去切换路由

$route是当前router跳转对象。里面可以获取name、path、query、params等相关信息

总结：query方式路由传参时，name和path属性均可以使用；而使用params方式路由传参时，必须用name，如果要用path，则需要在path里写入完整的参数作为最终完整的path，且不需要再写params字段。