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

前端面试九之Vue Router

news 来源：原创 2025/6/16 11:55:26

在 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();}
}