### Vue3 中
vue-router 动态
路由实现
#### 创建基础项目结构并安装依赖
为了在
Vue 3 项目中使用 `
vue-router` 的动态
路由功能，首先需要创建一个基本的
Vue 3 应用程序，并安装必要的包。
```bash
npm install
vue@next
vue-router@4
```
#### 配置
路由器实例
接下来，在项目的入口文件（通常是 `main
.js` 或者 `main
.ts`），配置一个新的
Vue Router 实例：
```javascript
// main
.js
import { createApp } from &
#39;
vue&
#39;
import App from &
#39;
./App
.vue&
#39;
import { create
Router, createWebHistory } from &
#39;
vue-router&
#39;
const app = createApp(App)
app
.use(create
Router({
history: createWebHistory(),
routes: [
{
path: &
#39;/&
#39;,
name: &
#39;home&
#39;,
component: () => import(&
#39;
./components/Home
.vue&
#39;)
},
// 定义带有参数的动态
路由
{
path: &
#39;/user/:id&
#39;,
name: &
#39;userProfile&
#39;,
component: () => import(&
#39;
./components/UserProfile
.vue&
#39;),
children: [
{
path: &
#39;:userId/orders&
#39;,
name: &
#39;userOrders&
#39;,
component: () => import(&
#39;
./components/UserOrders
.vue&
#39;)
}
]
}
]
}))
app
.mount(&
#39;
#app&
#39;)
```
这段代码展示了如何设置具有嵌套子路径的动态
路由[^3]。这里 `/user/:id` 是父级动态
路由，而 `:userId/orders` 则作为其下的子
路由。
#### 使用
Vuex 存储和更新
路由信息
对于更复杂的场景，比如基于权限或其他条件加载特定模块时，则可以考虑利用
Vuex 来管理和持久化这些变化后的
路由数据。
```javascript
// store/index
.js
export default createStore({
state() {
return {
additionalRoutes: []
};
},
mutations: {
ADD_ROUTE(state, route) {
this.router.addRoute(route);
state
.additionalRoutes
.push(route);
}
}
});
```
当应用程序启动或用户登录成功后，可以通过调用 `
this.$store
.commit(&
#39;ADD_ROUTE&
#39;, newRoute)` 方法向现有
路由表添加新条目[^1]。
#### 处理动态
路由匹配
为了让组件能够响应不同的 URL 参数值，可以在模板内部访问 `$route
.params` 对象获取当前激活的
路由参数。
```html
<!
-- UserProfile
.vue -->
<template>
<div class="profile">
<h1>User Profile</h1>
<p>ID: {{ $route
.params
.id }}</p> <!
-- 显示传入ID
-->
<
router-view></
router-view> <!
-- 渲染子
路由的内容
-->
</div>
</template>
<script setup>
import { useRoute } from "
vue-router";
const route = useRoute();
console
.log(`Current user id is ${route
.params
.id}`);
</script>
```
此示例说明了如何在一个名为 `UserProfile` 的组件内展示来自 URL 的用户 ID 并支持进一步导航至该用户的订单详情页[^4]。
本文介绍如何在Vue项目中使用vue-router去除URL中的'#'符号，通过开启history模式并利用History.pushState()方法实现平滑的页面跳转，提供更好的用户体验。
扫一扫
1840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
