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

这篇文章我们来讲一下routes的类型：RouteRecordRaw及其里面的属性配置，我们需要知道怎么去使用它们。

RouteRecordRaw

就是上篇回首Vue3之路由篇（二）提到的routes 对应的内容，当用户通过 routes option 或者 router.addRoutes() 来添加路由时，可以得到路由记录。

路由记录有三种：单一视图记录、多视图记录和重定向记录，那么在路有记录里面得有那些参数呢，又该怎么配置呢，让我们接着往下看。

path

记录的路径。应该以 / 开头，除非该记录是另一条记录的子记录。可以定义参数：/home/:user 匹配 /home/slifree 以及 /home/yexiao。如下：

const routes = [
    { path: '/home/:user', component:()=> import('../views/Home.vue') },
]

可以给出固定得路径或者动态路由。

redirect

重定向发生在所有导航守卫之前，并以新的目标位置触发一个新的导航。也可以是一个接收目标路由地址并返回我们应该重定向到的位置的函数。

如果router-link中，这样使用：

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

路由这么配置：

const routes = [
    { path: '/home', component:()=> import('../views/Home.vue') },
]

那么跳转到这个路由的结果就是：

http://localhost:3000/#/home?name=也笑

但是我们如果定义了重定向，如下：

const routes = [
    { path: '/home',redirect:"/about",  component:()=> import('../views/Home.vue') },
]

那么就是另外一种结果，如下：

http://localhost:3000/#/about?name=也笑

虽然url的参数也带着，但是没什么作用，点击路由'/home'，但是显示的是路由'/about'以及它对应的内容，这就是redirect的作用。

children

当前记录的嵌套路由。内容与父级配置一样。

alias

路由的别名。允许定义类似记录副本的额外路由，使用如下：

{ path: '/home', alias: "/h", component: () => import('../views/Home.vue') },

我们在访问'/home'和'/h'的结果是一样的，值得我们注意的是：

所有的 alias 和 path 值必须共享相同的参数。例如，我们是动态路由/home/:user，那么alias对应的/h/:user。

name

路由记录独一无二的名称。使用如下：

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

beforeEnter

在进入特定于此记录的守卫之前。注意如果记录有重定向属性，则 beforeEnter 无效，使用如下：

{
    path: '/home', component: () => import('../views/Home.vue'), beforeEnter() {
        console.log("也笑");
    }
}

props

允许将参数作为 props 传递给由 router-view 渲染的组件。当传递给一个多视图记录时，它应该是一个与组件具有相同键的对象，或者是一个应用于每个组件的布尔值，使用如下：

路由

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

Home组件

<template>{{props.user}}的home</template>

<script setup>
const props=defineProps({
    user:String
})
</script>

渲染结果：也笑的home，就是我们把动态路由的参数当作props使用。

总结

我们要记住所有的 alias 和 path 值必须共享相同的参数，alias一般我们用的并不多。
值得我们注意的是：如果你想使用函数式组件, 请确保在组件上添加一个 displayName，使用如下：

const HomeView = () => h('div', 'HomePage')
// 使用TypeScript时, 组件需要为 FunctionalComponent 类型
HomeView.displayName = 'HomeView'
const routes = [{ path: '/', component: HomeView }]

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

回首Vue3之路由篇（三）