这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战

我们的路由篇是围绕着Vue Router 4.x来讲的，这篇文章我们来讲一下路由的左右护法:router-link和router-view，我们需要知道怎么去使用它们。它们本质是组件，只不过赋予它们特殊的功能罢了，我们也可以利用h来实现这两个组件，如果你有兴趣，可以参考回首Vue3之API篇（一）和回首Vue3之API篇（五）这两篇文章。

左护法 router-link

自定义组件 router-link 是用来创建链接的，它可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。可以理解为是一个发送路由信息的组件。那么它又有那些属性呢，让我们来一探究竟把。

to

表示目标路由的链接，当被点击后，内部会立刻把 to 的值传到 router.push()。

固定路由

假定我们路由的一个路径为:

{ path: '/home', name:'home', component:()=> import('../views/Home.vue')

那么我们可以这样使用，如下：

通过path跳转路由

<router-link :to="'/home'">Home</router-link>
或
<router-link :to="{ path: '/home' }">Home</router-link>

因为这是命名路由，所以我们也可以通过name跳转路由

<router-link :to="{ name: 'home'}">Home</router-link>

动态路由

此时，如果是个带参数的动态路由，又怎样呢，如下：

{ path: '/home/:user', name:'home', component:()=> import('../views/Home.vue')

动态段以冒号:开始，如果我们想根据这个参数显示对应的内容，我们可以这样使用：

<router-link :to="{ path: '/home', params: { user: 'slifree' }}">Home</router-link>

我们也可以增加查询参数，如下：

<router-link :to="{path:'/home',params:{user:'slifree'},query: {name:'也笑'}}">Home</router-link>

那么我们可以这样获取params和query的值，如下：

<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.params); //{user: "slifree"}
console.log(route.query); //{name: "也笑"}
</script>

值得我们注意的是：访问路由useRouter 或 useRoute 函数只能在setup 函数调用。

replace

设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()，所以导航后不会留下历史记录，使用如下：

<router-link to="/about" replace>about</router-link>

当我们不想保留导航历史记录的时候可以使用此属性。

active-class

链接激活时，应用于渲染的 <a> 的 class。

默认值："router-link-active" (或者全局linkActiveClass)，当我们链接激活时，渲染如下：

<a href="#/about" class="router-link-active router-link-exact-active" aria-current="page">about</a>

当我们需要改变这个class的时候可以使用此属性，为了清晰的看出，我们定义一个中文类名也笑（中文类名是不被推荐的），渲染结果如下：

<a href="#/about" class="也笑 router-link-exact-active" aria-current="page">about</a>

aria-current-value

上述的渲染结果已经包含了此属性，aria就是描述标签在可视化的情况下的信息，是为需要帮助人士准备的辅助工具，没有特殊情况，我们使用默认值就可以了。

custom

<router-link> 是否应该将其内容包裹在 <a> 元素中。在使用 v-slot 创建自定义 RouterLink 时很有用。默认是包裹里面的，如果加上这个属性，如下：

<router-link to="/about" custom>about</router-link>

渲染结果如下：

about

此时about是没有<a> 元素包裹的。

exact-active-class

链接精准激活时，应用于渲染的 <a> 的 class。类比active-class的使用。

router-link 的 v-slot

<router-link> 通过一个作用域插槽暴露底层的定制能力，使用如下：

<router-link
    to="/about"
    custom
    v-slot="{ href, route, navigate, isActive, isExactActive }"
  >
    <div>about</div>
 </router-link>

通常我们在配合其他组件的时候会使用v-slot，但是我们要注意：要把custom 配置传递给 <router-link>，以防止它将内容包裹在 <a> 元素内。

右护法 router-view

router-view 将显示与 url 对应的组件，我们可以把它放在任何地方，以适应我们想要的布局。可以理解为是一个接受路由信息并展示视图的组件。那么它又有那些属性呢，让我们来一探究竟把。

name

如果 <router-view> 设置了 name，则会渲染对应的路由配置中 components 下的相应组件。

假定我们的路由配置如下：

{ path: '/', name:'hello',components:{
    default:()=> import('../components/HelloWorld.vue'),
    home:()=> import('../views/Home.vue')
} }

使用如下：

<h2>
    <router-view></router-view>
</h2>
<h1>
    <router-view name="home"></router-view>
</h1>

默认路径情况下，HelloWorld会渲染在h2中，Home会渲染在h1中。

route

一个路由地址的所有组件都已被解析（如果所有组件都被懒加载），因此可以显示。这个属性我们是很少用到的。

router-view 的 v-slot

<router-view> 暴露了一个 v-slot API，主要使用 <transition> 和 <keep-alive> 组件来包裹你的路由组件，使用如下：

<router-view v-slot="{ Component, route }">
    <transition :name="route.meta.transition || 'fade'" mode="out-in">
        <keep-alive>
            <component
              :is="Component"
              :key="route.meta.usePathKey ? route.path : undefined"
            />
        </keep-alive>
    </transition>
</router-view>

总结

我们要熟练使用router-link的to和router-view的name。
我们要学会在setup中获取路由信息。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之路由篇（一）