路由

router-link

  • 可以在不重新加载页面的情况下更改 URL,处理 URL 的生成以及编码
<router-link to="/about">Go to About</router-link>

router-view

  • router-view 将显示与 url 对应的组件。可以放在任何地方,以适应布局
<router-view> <!-- 路由匹配到的组件将渲染在这里 --> </router-view>

$router和$route的区别

  • $router: 路由操作对象,只写。需要对路由进行操作时使用。如路由跳转
  • $route: 路由信息对象,只读。获取路由相关信息时使用。如获取当前路由地址

获取当前路由地址

var url = this.$route.path

参数

query(get)

传参

  • name 和 path 都能用。用 path 的时候,提供的 path 值必须是相对于根路径的相对路径,而不是相对于父路由的相对路径,否则无法成功访问
this.$router.push({ path: '/path', query: { id: '123', data: '456' } })

获取参数

this.$route.query.xxx

params(post)

传参

  • 只能用 name,不能用 path
this.$router.push({ name: 'name', params: { id: '123', data: '456' } })

获取参数

this.$route.params.xxx

同一个页面地址栏参数改变,页面不刷新的问题解决方案

1.监听地址栏变化(watch),这是vue-router官方给出的解决办法

watch: {
    $route(to, from) {
        if (this.$route.query.参数) {
             重新加载一次created或者mounted钩子中的渲染的数据
        }
      },
    // 或者
    $route(){
         if (this.$route.query.参数) {
             重新加载一次created或者mounted钩子中的渲染的数据
         }
       }, 
    },

2.给router-view加个唯一的key

<template>
    <div>
    <router-view :key='this.$route.fullpath' />
    </div>
</template>
最后修改:2023 年 02 月 08 日
如果想要赞赏,我绝不阻拦