vue 动态路由的 渲染

该博客详细介绍了如何在Vue.js应用中实现路由权限拦截,通过 vuex 进行状态管理,动态生成及设置路由,确保只有授权用户才能访问特定菜单和页面。主要涉及Vuex模块的使用、路由拦截器的配置以及动态路由的生成过程。

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

permission.js 配置路由拦截 router.beforeEach

// 登陆的时候获取菜单列表
let {  menuList  } = await store.dispatch('user/getInfo') 
 // 去 vuex 里面处理 菜单列表
const getRoutesList = await store.dispatch('permission/getRoutesList', menuList  )
// 合并静态路由和动态路由 把404 页面最后添加进去
let routerList = [...router.options.routes, ...getRoutesList, {
            path: '*',
            redirect: '/404',
            hidden: true
          }]
 // 重新渲染 路由菜单 (不写渲染不出来菜单) 
router.options.routes = routerList;
router.addRoutes(routerList)
          next({
            ...to,
            replace: true
          })

vuex 中配置 路由菜单列表处理

import Layout from '@/layout'

export const filterRouter = (menusList) => {
  const menus = []
  menusList.map(item => {
    var obj = {}
    if (item.parentId === 0) {
      obj = {
        path: item.url,
        component: Layout,
        parentId: item.parentId,
        menuId: item.menuId,
        redirect: item.redirectUrl,
        hidden: item.hidden == 1 ? false : true,
        meta: {
          title: item.displayName,
          icon: item.icon
        },
      }
    } else {
      obj = {
        path: item.url,
        parentId: item.parentId,
        menuId: item.menuId,
        component: (resolve) => require([`@/views${item.url}`], resolve),
        redirect: item.redirectUrl,
        hidden: item.hidden == 1 ? false : true,
        meta: {
          title: item.displayName,
          icon: item.icon
        },
      }
    }
    menus.push(obj)
  })
  const map = {}
  menus.forEach(item => {
    map[item.menuId] = item
  })
  const tree = []
  menus.map(item => {
    const pid = item.parentId
    if (pid === 0) {
      tree.push(item)
    } else {
      const parent = map[pid]
      if (!parent.children) {
        parent.children = [item]
      } else {
        parent.children.push(item)
      }
    }
  })
  return tree
}
const state = {
  accesseRoutes: [],
};
const getters = {};
const mutations = {
  SET_ACCESS_ROUTES: (state, routes) => {
    state["accesseRoutes"] = routes;
  },
};
const actions = {
  async generateRoutes({
    commit
  }, menus) {
    const accessedRoutes = await filterRouter(menus)
    commit("SET_ACCESS_ROUTES", accessedRoutes);
    return accessedRoutes
  },
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
};
<think>首先,用户意图是了解Vue.js动态路由的实现方法及示例。用户提到了“动态路由”,所以我需要基于Vue Router来解释如何实现动态路由。 从系统级指令中,我需要: - 所有行内数学表达式用$...$格式(但这里可能不涉及数学表达式)。 - 独立公式用$$...$$格式(同样,可能不适用)。 - LaTeX语法正确(但在这个上下文中,更多是关于代码)。 - 使用中文回答。 - 生成相关问题。 - 在回答中引用的段落末尾添加引用标识。 - 回答结构清晰,帮助用户逐步解决问题。 参考提供的引用: - [^1]:介绍路由概念和Vue Router。 - [^2]:Vue Router的基本使用。 - [^3]:Vue Router定义多个路由。 - [^4]:一个HTML文件加载JS文件的例子。 用户意图是动态路由,所以我会专注于Vue Router的动态路由特性,如动态路径参数、嵌套路由等。 结构化我的回答: 1. **引言**:简要介绍动态路由Vue.js中的作用。 2. **实现方法**:解释如何定义动态路由。 - 使用路由参数(如`:id`)。 - 在组件中访问路由参数。 - 动态添加路由(使用`router.addRoute()`)。 3. **示例**:提供代码示例。 - 一个简单的例子:显示用户详情。 - 另一个例子:动态添加路由。 4. **生成相关问题**:在最后添加相关问题。 确保使用中文。 在引用段落末尾添加引用标识。例如,如果我从引用[^1]中借用概念,就在那里添加[^1]。 可能的引用点: - 概念部分可以引用[^1]或[^3]。 - 基本使用引用[^2]。 - 文件加载引用[^4],但可能不直接相关。 生成相关问题: - 基于动态路由的常见问题,如性能优化、实际应用等。 回答结构: - 开头:解释动态路由。 - 方法:逐步实现。 - 示例:代码块。 - 结尾:相关问题。 代码格式:使用代码块,如示例中所示。 最终输出应包括: - 回答部分。 - §§相关问题§§部分。</think>### Vue.js 动态路由实现方法及示例 在 Vue.js 中,动态路由允许你根据 URL 参数动态加载和渲染组件,这在处理用户详情、分类页面等场景非常有用。Vue Router 是官方提供的路由管理器,支持动态路径参数和动态路由添加功能[^3]。下面我将一步步解释实现方法,并提供完整示例。 #### 1. 动态路由的基本实现方法 动态路由的核心是使用 **路径参数**(如 `:id`)在路由定义中标记动态部分。当用户访问 URL 时,Vue Router 会解析参数并传递给组件。以下是关键步骤: - **定义动态路径**:在路由配置中使用冒号(`:`)定义参数,例如 `path: '/user/:id'`。 - **访问路由参数**:在组件中通过 `this.$route.params` 或 Vue Router 的 Composition API(如 `useRoute()`)获取参数值。 - **动态添加路由**:对于运行时添加路由(如基于用户权限),使用 `router.addRoute()` 方法[^2]。 这种机制让应用程序能响应 URL 变化,实现无刷新页面切换[^1]。 #### 2. 完整代码示例 以下是一个基于 Vue 3 和 Vue Router 4 的动态路由示例。假设我们有一个用户详情页面,URL 如 `/user/123` 会动态加载用户数据。 **步骤 1: 安装和设置 Vue Router** 首先,确保项目中已安装 Vue Router。如果未安装,运行: ```bash npm install vue-router@4 ``` **步骤 2: 定义路由配置** 在 `src/router/index.js` 文件中,设置动态路由: ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; import UserDetail from '../views/UserDetail.vue'; const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/user/:id', // 动态路径参数 :id name: 'UserDetail', component: UserDetail, props: true // 将路由参数作为 props 传递给组件 } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` **步骤 3: 创建组件** 在 `src/views/UserDetail.vue` 中,访问动态参数并显示用户详情: ```vue <template> <div> <h2>用户详情</h2> <p>用户ID: {{ userId }}</p> <p v-if="userData">用户名: {{ userData.name }}</p> <p v-else>加载中...</p> </div> </template> <script> import { ref, onMounted } from 'vue'; import { useRoute } from 'vue-router'; export default { props: ['id'], // 接收路由参数作为 prop setup(props) { const route = useRoute(); const userId = ref(props.id || route.params.id); // 通过 prop 或 $route 获取参数 const userData = ref(null); onMounted(async () => { // 模拟 API 调用,基于参数获取数据 const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId.value}`); userData.value = await response.json(); }); return { userId, userData }; } }; </script> ``` **步骤 4: 动态添加路由示例** 如果需要运行时添加路由(如用户登录后添加权限路由),在组件或入口文件中使用: ```javascript // 在 src/main.js 或组件中 import router from './router'; // 模拟条件:用户登录后添加新路由 if (userIsAdmin) { router.addRoute({ path: '/admin', name: 'Admin', component: () => import('./views/Admin.vue') // 懒加载组件 }); } ``` #### 3. 关键点说明 - **参数传递**:使用 `props: true` 将路由参数作为组件 props 传递,提高代码可读性[^2]。 - **响应式更新**:当 URL 参数变化时(如从 `/user/1` 到 `/user/2`),组件会自动重新渲染,无需手动监听。 - **懒加载**:动态导入组件(`component: () => import(...)`)优化性能[^3]。 - **错误处理**:添加 `path: '/:catchAll(.*)'` 路由捕获未匹配的 URL,避免空白页面。 #### 4. 实际应用场景 - 用户管理系统:根据用户 ID 显示详情页。 - 电商平台:动态加载产品分类页面(如 `/category/:categoryId`)。 - 权限控制:基于用户角色动态添加路由,确保安全访问[^1]。 动态路由提升了 SPA 的灵活性和用户体验,避免了传统多页面应用的刷新问题[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值