当前位置： 首页 > news >正文

前端面试九之Vue Router

news 2025/6/16 8:16:48

在 Vue.js 中，vue-router 是官方的路由管理器，它允许你通过不同的 URL 显示不同的组件，从而实现单页面应用（SPA）。以下是关于 vue-router 的详细介绍，包括路由配置、动态导入、嵌套路由、路由跳转、导航菜单、动态路由、重置路由、页面刷新和动态菜单等内容。

1. 路由配置

安装 vue-router

如果你还没有安装 vue-router，可以通过 npm 或 yarn 安装：

npm install vue-router

或者

yarn add vue-router
基本配置

在 Vue 项目中，通常会在一个单独的文件（如 router/index.js）中配置路由。

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';Vue.use(Router);export default new Router({mode: 'history', // 使用历史模式routes: [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}]
});

在 main.js 中引入并使用路由配置：

import Vue from 'vue';
import App from './App.vue';
import router from './router';new Vue({router,render: h => h(App)
}).$mount('#app');

2. 动态导入

为了优化应用的加载速度，可以使用动态导入（import()）来实现代码分割。

const Home = () => import('../components/Home.vue');
const About = () => import('../components/About.vue');export default new Router({routes: [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}]
});

3. 默认路由

默认路由通常用于重定向用户到主页或其他默认页面。可以通过 redirect 属性来实现。

404 页面用于处理未匹配到任何路由的情况。可以通过一个通配符路由（*）来捕获所有未匹配的路径。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';
import NotFound from '../components/NotFound.vue';Vue.use(Router);export default new Router({mode: 'history',routes: [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: () => import('../components/About.vue')},{path: '/user/:id',name: 'User',component: () => import('../components/User.vue')},{path: '*',name: 'NotFound',component: NotFound},{path: '/default',redirect: '/'}]
});

4. 嵌套路由

嵌套路由允许你在组件内部嵌套子路由，非常适合实现多级菜单或复杂的页面结构。

const Home = () => import('../components/Home.vue');
const About = () => import('../components/About.vue');
const Profile = () => import('../components/Profile.vue');
const Settings = () => import('../components/Settings.vue');export default new Router({routes: [{path: '/',name: 'Home',component: Home},{path: '/about',component: About,children: [{path: 'profile',component: Profile},{path: 'settings',component: Settings}]}]
});

在父组件中使用 <router-view> 来显示子路由的内容：

<template><div><h1>About</h1><router-view></router-view></div>
</template>

5. 路由跳转

可以通过 <router-link> 或编程式导航来实现路由跳转。

使用 <router-link>
<template><div><h1>Home</h1><router-link to="/about/profile">Go to Profile</router-link></div>
</template>
编程式导航
export default {methods: {goToProfile() {this.$router.push('/about/profile');}}
};

6. 动态路由

从后端获取路由信息，并动态地将这些信息传入 vue-router。这种方式特别适用于需要根据后端配置动态生成路由的场景，例如基于角色的路由权限控制或动态菜单生成。

1. 后端返回的路由数据

假设后端返回的路由数据是一个 JSON 格式，包含路径、名称和组件路径。例如：

[{"path": "/admin","name": "Admin","componentPath": "components/AdminComponent.vue"},{"path": "/user","name": "User","componentPath": "components/UserComponent.vue"}
]
2. 动态加载组件

在 Vue 中，可以通过 import() 动态加载组件。为了方便管理，可以将组件路径存储为字符串，并在需要时动态加载。

创建动态组件加载方法

在 src/utils 文件夹中创建一个 dynamicImport.js 文件，用于动态加载组件。

// src/utils/dynamicImport.js
export default function dynamicImport(componentPath) {return () => import(`@/${componentPath}`);
}
3. 获取后端数据并动态添加路由

在主组件（如 App.vue）中，使用 Axios 获取后端数据，并动态添加路由。

App.vue
<template><div id="app"><nav><router-link to="/">主页</router-link> |<router-link v-for="route in dynamicRoutes" :key="route.name" :to="route.path">{{ route.name }}</router-link></nav><router-view /></div>
</template><script>
import axios from 'axios';
import dynamicImport from '@/utils/dynamicImport';export default {name: 'App',data() {return {dynamicRoutes: []};},created() {this.fetchRoutes();},methods: {async fetchRoutes() {try {const response = await axios.get('https://your-backend-api.com/routes');const routes = response.data;// 清空现有动态路由this.dynamicRoutes = [];// 移除所有动态添加的路由this.$router.options.routes.forEach(route => {if (route.name !== 'Home') {this.$router.removeRoute(route.name);}});// 动态添加路由routes.forEach(route => {const component = dynamicImport(route.componentPath);this.$router.addRoute({path: route.path,name: route.name,component});this.dynamicRoutes.push(route);});} catch (error) {console.error('获取路由信息失败:', error);}}}
};
</script>
4. 配置路由

在 router/index.js 中，初始化路由配置。由于动态路由是在组件中添加的，因此初始路由配置可以只包含默认路由。

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';Vue.use(Router);export default new Router({mode: 'history',routes: [{path: '/',name: 'Home',component: Home}]
});
总结

通过使用字符串拼接的方式动态加载组件，你可以根据后端返回的路由配置动态生成路由。这种方法特别适用于需要根据用户角色或权限动态生成路由的场景，例如多租户系统或角色管理系统。通过动态加载组件，可以实现代码分割，优化应用的加载速度。

7.页面刷新

使用 localStorage 或 sessionStorage 来存储用户角色或权限信息，并根据这些信息动态生成路由，是一种常见的解决方案。这种方式可以避免每次页面刷新或用户切换角色时重新从后端获取路由信息，从而提高应用的性能和用户体验。

1. 使用 localStorage 或 sessionStorage
区别

  • localStorage：数据存储在浏览器中，直到手动清除，即使关闭浏览器后数据仍然存在。

  • sessionStorage：数据存储在浏览器会话中，关闭浏览器标签或窗口后数据会被清除。

对于用户角色或权限信息，通常使用 localStorage，因为这些信息在用户登录后需要持久化，直到用户主动登出。

2. 示例：使用 localStorage 动态生成路由
后端返回的路由数据

假设后端返回的路由数据是一个 JSON 格式，包含路径、名称和组件路径。例如：

[{"path": "/admin","name": "Admin","componentPath": "components/AdminComponent.vue"},{"path": "/user","name": "User","componentPath": "components/UserComponent.vue"}
]
动态组件加载方法

在 src/utils 文件夹中创建一个 dynamicImport.js 文件，用于动态加载组件。

// src/utils/dynamicImport.js
export default function dynamicImport(componentPath) {return () => import(`@/${componentPath}`);
}
获取后端数据并动态添加路由

在主组件（如 App.vue）中，使用 Axios 获取后端数据，并动态添加路由。同时，将路由信息存储到 localStorage 中。

<template><div id="app"><nav><router-link to="/">主页</router-link> |<router-link v-for="route in dynamicRoutes" :key="route.name" :to="route.path">{{ route.name }}</router-link></nav><router-view /></div>
</template><script>
import axios from 'axios';
import dynamicImport from '@/utils/dynamicImport';export default {name: 'App',data() {return {dynamicRoutes: []};},created() {this.fetchRoutes();},methods: {async fetchRoutes() {try {// 尝试从 localStorage 获取路由信息let routes = JSON.parse(localStorage.getItem('userRoutes'));if (!routes) {// 如果没有，从后端获取const response = await axios.get('https://your-backend-api.com/routes');routes = response.data;// 将路由信息存储到 localStoragelocalStorage.setItem('userRoutes', JSON.stringify(routes));}// 清空现有动态路由this.dynamicRoutes = [];// 移除所有动态添加的路由this.$router.options.routes.forEach(route => {if (route.name !== 'Home') {this.$router.removeRoute(route.name);}});// 动态添加路由routes.forEach(route => {const component = dynamicImport(route.componentPath);this.$router.addRoute({path: route.path,name: route.name,component});this.dynamicRoutes.push(route);});} catch (error) {console.error('获取路由信息失败:', error);}}}
};
</script>
配置路由

在 router/index.js 中，初始化路由配置。由于动态路由是在组件中添加的，因此初始路由配置可以只包含默认路由。

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';Vue.use(Router);export default new Router({mode: 'history',routes: [{path: '/',name: 'Home',component: Home}]
});
3. 用户切换角色或重新登录

在用户切换角色或重新登录时，需要清除 localStorage 中的路由信息，并重新获取路由配置。

methods: {async fetchRoutes() {try {// 尝试从 localStorage 获取路由信息let routes = JSON.parse(localStorage.getItem('userRoutes'));if (!routes) {// 如果没有，从后端获取const response = await axios.get('https://your-backend-api.com/routes');routes = response.data;// 将路由信息存储到 localStoragelocalStorage.setItem('userRoutes', JSON.stringify(routes));}// 清空现有动态路由this.dynamicRoutes = [];// 移除所有动态添加的路由this.$router.options.routes.forEach(route => {if (route.name !== 'Home') {this.$router.removeRoute(route.name);}});// 动态添加路由routes.forEach(route => {const component = dynamicImport(route.componentPath);this.$router.addRoute({path: route.path,name: route.name,component});this.dynamicRoutes.push(route);});} catch (error) {console.error('获取路由信息失败:', error);}},handleUserChange() {// 用户切换角色或重新登录时调用// 清除 localStorage 中的路由信息localStorage.removeItem('userRoutes');this.fetchRoutes();}
}

http://www.xdnf.cn/news/1052857.html

相关文章：

  • 【Qt 中的元对象系统（Meta-Object System）】
  • 洛谷 P3865 【模板】ST 表 RMQ 问题
  • 基于OpenManus的跨平台部署方案及远程访问安全机制
  • 李宏毅2025《机器学习》第二讲-深度解构AI Agent：让大型语言模型学会记忆、使用工具与制定计划
  • LeetCode 2389.和有限的最长子序列
  • libuv 框架
  • RabbitMQ死信队列
  • 【测开面试题】八股文总结
  • 快速上手文本向量模型 Sentence-Transformers
  • Java正则分组：高效捕获与引用技巧
  • InnoDB的undo日志的数据结构
  • 从0开始学习R语言--Day24--稀疏建模
  • 基于MSE-Nacos实现服务的动态发现和配置动态管理
  • 车载软件架构 --- 汽车中央控制单元HPC软件架构方案实例
  • 生成对抗网络（GANs）入门介绍指南：让AI学会“创造“的魔法（一）
  • 已知路由表和分组的目的地址求对应的下一跳地址
  • 一阶偏微分方程特征线与解分析
  • C#最佳实践：为何应减少嵌套
  • JavaScript学习笔记
  • java基础面试题。
  • 信息学奥赛一本通 1541：【例 1】数列区间最大值
  • C# 枚举(位标志)
  • FastAPI-MCP构建自定义MCP工具实操指南
  • 敏捷开发的特点
  • 【计算机 电脑任务管理器中，性能界面的各项指标的含义及影响】
  • idea2024使用卡顿
  • 《k8s 部署》常见报错类型1
  • 华为OD-2024年E卷-英文输入法[100分] -- python
  • [Java 基础]日期时间
  • 力扣的SQL