vue3 命名路由怎么使用
时间: 2023-09-28 17:05:54 浏览: 47
在 Vue.js 3 中,我们可以使用 `createRouter` 函数来创建路由器,并为其定义命名路由。下面是一个简单的示例:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
```
在上面的示例中,我们定义了两个路由,一个是 `/` 路径的主页,另一个是 `/about` 路径的关于页面。我们使用 `name` 属性为每个路由分配了一个唯一的名称。
现在,我们可以在 Vue.js 应用程序中使用这些命名路由。下面是一个简单的示例:
```html
<template>
<div>
<router-link :to="{ name: 'Home' }">Home</router-link>
<router-link :to="{ name: 'About' }">About</router-link>
<router-view></router-view>
</div>
</template>
```
在上面的示例中,我们使用 `router-link` 组件来链接到我们定义的两个命名路由。我们使用 `:to` 属性来指定要链接到的路由名称。我们还使用 `router-view` 组件来显示当前活动的路由。
希望这可以回答您的问题。
相关推荐
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)