###
Vue3 中
配置路由的方法及示例
在
Vue3 中，`
vue-router` 是用于管理
前端路由的核心库。以下是关于如何在
Vue3 项目中
配置路由的具体方法以及相关示例。
#### 安装 `
vue-router`
首先，在使用
路由之前需要安装 `
vue-router` 库。可以通过 npm 或 yarn 来完成安装：
```bash
npm install
vue-router@next
```
或者
```bash
yarn add
vue-router@next
```
由于
Vue3 使用的是 Composition API 和新的生命周期钩子，因此需要确保安装的是兼容
Vue3 的版本（即 `
vue-router@4
.x`）[^1]。
---
####
配置基础
路由
创建一个名为 `router
.js` 或 `index
.js` 的文件来定义
路由规则。以下是一个简单的
路由配置示例：
```
javascript
// router/index
.js
import { createRouter, createWebHistory } from &#
39;
vue-router&#
39;;
import Home from &#
39;
../views/Home
.vue&#
39;; // 主页组件
import Category from &#
39;
../views/Category/index
.vue&#
39;; // 分类页面组件
const routes = [
{
path: &#
39;/&#
39;,
name: &#
39;Home&#
39;,
component: Home,
},
{
path: &#
39;/category&#
39;,
name: &#
39;Category&#
39;,
component: Category,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
```
在此示例中，我们引入了两个视图组件并将其注册为
路由路径 `/` 和 `/category`。注意这里还设置了 `history` 模式为 `createWebHistory()`，这是为了实现 HTML5 历史模式的 URL 跳转[^2]。
---
#### 将
路由集成到应用中
接下来，在项目的入口文件 `main
.js` 中导入并挂载
路由器实例：
```
javascript
// main
.js
import { createApp } from &#
39;
vue&#
39;;
import App from &#
39;
./App
.vue&#
39;;
import router from &#
39;
./router&#
39;;
const app = createApp(App);
app
.use(router);
app
.mount(&#
39;#app&#
39;);
```
这样就完成了
路由与应用程序之间的绑定操作。
---
#### 渲染 `<router-view>` 组件
最后一步是在模板中放置 `<router-view>` 占位符以便动态显示对应的组件内容。例如：
```html
<!-- App
.vue -->
<template>
<div id="app">
<nav>
<!-- 导航链接 -->
<router-link to="/">首页</router-link> |
<router-link to="/category">分类</router-link>
</nav>
<!-- 动态渲染区域 -->
<router-view></router-view>
</div>
</template>
```
上述代码展示了如何利用 `<router-link>` 实现页面间的切换功能，并通过 `<router-view>` 插槽展示匹配成功的组件[^
3]。
---
#### 处理未找到的
路由 (404)
为了避免访问不存在的地址时返回空白界面，可以设置一条通配符规则捕获所有未知请求并将它们重定向至自定义错误提示页面：
```
javascript
{
path: &#
39;/:pathMatch(
.*)*&#
39;,
name: &#
39;NotFound&#
39;,
component: () => import(&#
39;
../views/NotFound
.vue&#
39;), // 按需加载
}
```
此部分实现了当用户输入非法路径时自动跳转到指定的 404 页面的功能[^4]。
---
### 总结
以上就是在
Vue3 中
配置基本
路由的方式及其注意事项。它涵盖了从环境搭建、模块引入再到实际运用中的每一个重要环节。
扫一扫
2543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
