【Vue3+Vite】路由机制router 快速学习 第四期

本文详细介绍了Vue.js中的路由功能,包括路由的基本概念、创建入门案例、路由重定向、编程式路由的使用、以及如何通过useRouter进行路由传参。同时,还涉及了路由守卫的概念和应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


路由简介

路由是什么

路由就是根据不同的 URL 地址展示不同的内容或页面。
页面切换

路由的作用

  • 单页应用程序(SPA)中,路由可以实现不同视图之间的无刷新切换,提升用户体验;
  • 路由还可以实现页面的认证和权限控制,保护用户的隐私和安全;
  • 路由还可以利用浏览器的前进与后退,帮助用户更好地回到之前访问过的页面。

一、路由入门案例

创建路由基本流程:

  • 页面组件准备
  • App主体页 :
    • 定义 路由链接 <router-link to="/">
    • 定义 路由显示位置 <router-view name="homeView">
  • js配置路由:
    • 导入路由vue-router相关依赖 createRoutercreateWebHashHistory方法
    • 创建路由方法 声明路由规则 createRouter()
      • path:'/'
      • components:{ homeView:Home }
    • 对外暴露router对象变量 给main.js
  • main.js中导入router配置
    • import 路由js
    • 绑定路由对象 app.use(router)

需求分析:
在这里插入图片描述

1. 创建项目 导入路由依赖

npm create vite //创建项目cd 项目文件夹 //进入项目文件夹
npm install //安装项目需求依赖
npm install vue-router@4 --save //安装全局的vue-router 4版本

2. 准备页面和组件

  • components/Home.vue
<script setup>
</script>

<template>
  <div>
    <h1>Home页面</h1>
  </div>
</template>

<style scoped>
</style>

  • components/List.vue
<script setup>
</script>

<template>
  <div>
    <h1>List页面</h1>
  </div>
</template>

<style scoped>
</style>

  • App.vue
<script setup>
</script>

<template>
  <div>
    <h1>App页面</h1>
    <hr />
    <!-- 路由的连接 -->
    <router-link to="/">home页</router-link>
    <br />
    <router-link to="/list">list页</router-link>
    <br />
    <!-- 路由连接对应视图的展示位置 -->
    <hr />默认展示位置:
    <router-view></router-view>
    <hr />Home视图展示:
    <router-view name="homeView"></router-view>
    <hr />List视图展示:
    <router-view name="listView"></router-view>
    <hr />
  </div>
</template>

<style scoped>
</style>

3. 准备路由配置

  • createWebHashHistory() 是 Vue.js 基于 hash 模式创建路由的工厂函数。
  • 在使用这种模式下,路由信息保存在 URL 的 hash 中,
  • 使用 createWebHashHistory() 方法,可以创建一个路由历史记录对象,用于管理应用程序的路由。
  • 在 Vue.js 应用中:
    - 通常使用该方法来创建路由的历史记录对象。
    - 就是路由中缓存历史记录的对象,vue-router 提供
  • src/routers/router.js
// 导入路由创建的相关方法
import {
   
    createRouter, createWebHashHistory } from 'vue-router'

// 导入vue组件
import Home from '../components/Home.vue'
import List from '../components/List.vue'

// 创建路由对象,声明路由规则
const router = createRouter({
   
   
    history: createWebHashHistory(),
    routes: [
        {
   
   
            path: '/',
            components: {
   
   
                default: Home,
                homeView: Home
            }
        },
        {
   
   
            path: '/list',
            components: {
   
   
                listView: List
            
<think>好的,我现在要帮用户解决在Vue3项目中使用Vite、Element Plus、Pinia和Router结合JavaScript实现动态路由和菜单的问题。首先,我需要回忆一下相关技术栈的配置和使用方法。 用户提到的是Vue3,所以首先要确认Vue3的动态路由机制Vue Router 4支持动态添加路由,使用router.addRoute()方法。动态路由通常是在用户登录后根据权限获取路由数据,然后添加到路由实例中。 接下来是菜单的实现。菜单组件需要根据路由数据生成,可能需要递归组件来处理多级嵌套菜单。Element Plus的菜单组件如el-menu、el-sub-menu、el-menu-item可以用来构建界面。 然后是数据来源,用户需要从后端获取菜单数据,可能需要将后端返回的数据转换成路由配置。这里需要处理路由的path、component、children等属性。特别是component需要动态导入,比如使用() => import(&#39;@/views/...&#39;)。 Pinia用于状态管理,可以存储菜单数据和用户权限信息。在用户登录后,获取菜单数据并存储在Pinia的store中,然后在路由守卫中进行路由的动态添加。 权限控制方面,需要在路由守卫(permission.js)中检查用户是否已登录和是否已获取路由数据。如果未登录,跳转到登录页;如果已登录但未加载路由,则获取数据并添加路由。 还需要处理404页面,确保在动态添加路由后,将404路由放在最后,否则会优先匹配。 现在需要考虑步骤: 1. 准备路由数据:定义需要动态加载的路由和静态路由(如login、404)。 2. 创建Pinia store存储菜单和用户状态。 3. 在路由守卫中处理动态路由添加逻辑。 4. 创建菜单组件,根据store中的路由数据渲染菜单。 5. 处理动态导入组件,可能需要将组件路径映射到实际路径。 6. 测试流程:登录后获取数据,添加路由,渲染菜单,跳转。 可能遇到的问题:动态路由的component解析是否正确,菜单的嵌套渲染,路由添加的顺序,以及权限验证的时机。 需要参考提供的引用内容,比如引用[1]中的permission.js和router配置,引用[3]中的main.ts设置,以及如何整合Pinia。 现在需要将这些步骤整理成清晰的指导,包括代码示例和关键点说明,确保用户能按步骤实现。</think>在 Vue3 项目中实现动态路由与菜单功能,需结合路由权限验证和状态管理,具体步骤如下: --- ### 一、项目结构准备 ``` src/ ├─router/ │ ├─index.js # 路由配置 │ └─permission.js # 路由守卫 ├─stores/ │ └─menuStore.js # Pinia存储菜单数据 ├─views/ │ ├─Login.vue # 登录页 │ └─... # 动态路由页面 ├─components/ │ ├─Layout.vue # 基础布局 │ └─SideMenu.vue # 动态菜单组件 ``` --- ### 二、核心实现步骤 #### 1. 路由配置(router/index.js) ```javascript import { createRouter, createWebHistory } from &#39;vue-router&#39; // 静态路由(无需权限) const constantRoutes = [ { path: &#39;/login&#39;, component: () => import(&#39;@/views/Login.vue&#39;) }, { path: &#39;/404&#39;, component: () => import(&#39;@/views/404.vue&#39;) } ] // 创建路由实例 const router = createRouter({ history: createWebHistory(), routes: constantRoutes }) export default router ``` #### 2. Pinia 状态管理(stores/menuStore.js) ```javascript import { defineStore } from &#39;pinia&#39; export const useMenuStore = defineStore(&#39;menu&#39;, { state: () => ({ menuData: [], // 菜单数据 hasAuth: false // 是否已获取权限 }), actions: { // 模拟获取菜单数据 async fetchMenuData() { const res = await mockFetchMenuAPI() // 替换为真实API this.menuData = res this.hasAuth = true } } }) ``` #### 3. 路由守卫(permission.js) ```javascript import router from &#39;./router&#39; import { useMenuStore } from &#39;@/stores/menuStore&#39; router.beforeEach(async (to, from, next) => { const menuStore = useMenuStore() // 已登录状态处理 if (localStorage.getItem(&#39;token&#39;)) { if (to.path === &#39;/login&#39;) { next(&#39;/&#39;) } else { if (!menuStore.hasAuth) { await menuStore.fetchMenuData() await addDynamicRoutes() // 动态添加路由 next({ ...to, replace: true }) // 重新跳转目标页 } else { next() } } } // 未登录状态 else { to.path !== &#39;/login&#39; ? next(&#39;/login&#39;) : next() } }) // 动态路由添加函数 async function addDynamicRoutes() { const menuStore = useMenuStore() menuStore.menuData.forEach(route => { router.addRoute(&#39;Layout&#39;, { // 假设Layout是基础布局组件 path: route.path, component: () => import(`@/views/${route.component}.vue`), meta: { title: route.title } }) }) router.addRoute({ path: &#39;/:catchAll(.*)&#39;, redirect: &#39;/404&#39; }) // 404路由必须最后添加 } ``` #### 4. 动态菜单组件(SideMenu.vue) ```vue <template> <el-menu router :default-active="$route.path"> <template v-for="item in menuData" :key="item.path"> <el-sub-menu v-if="item.children" :index="item.path"> <template #title>{{ item.title }}</template> <menu-item :menu-data="item.children" /> </el-sub-menu> <el-menu-item v-else :index="item.path"> {{ item.title }} </el-menu-item> </template> </el-menu> </template> <script setup> defineProps({ menuData: { type: Array, required: true } }) </script> ``` --- ### 三、关键配置说明 1. **路由元信息**:通过`meta`字段携带权限标识 2. **组件动态导入**:使用`() => import()`实现代码分割 3. **404路由处理**:必须最后添加通配路由`path: &#39;/:catchAll(.*)&#39;` 4. **菜单数据格式**:需包含`path`、`component`(对应views目录文件名)、`title`字段 --- ### 四、典型数据格式示例 ```javascript // 模拟接口返回数据 [ { path: &#39;/dashboard&#39;, component: &#39;Dashboard&#39;, title: &#39;控制台&#39;, icon: &#39;el-icon-monitor&#39; }, { path: &#39;/user&#39;, title: &#39;用户管理&#39;, children: [ { path: &#39;/user/list&#39;, component: &#39;UserList&#39;, title: &#39;用户列表&#39; } ] } ] ``` --- ### 五、常见问题解决 1. **页面刷新白屏**:在`app.vue`的`onMounted`中重新获取路由 2. **菜单高亮问题**:使用`router-link-active`类名结合当前路由匹配 3. **按钮级权限**:可在Pinia中存储权限码,配合`v-if`控制显示 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

「已注销」

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值