在 Vue.js 中，vue-router 是官方的路由管理器，它允許你通過不同的 URL 顯示不同的組件，從而實(shí)現(xiàn)單頁面應(yīng)用（SPA）。以下是關(guān)于 vue-router 的詳細(xì)介紹，包括路由配置、動(dòng)態(tài)導(dǎo)入、嵌套路由、路由跳轉(zhuǎn)、導(dǎo)航菜單、動(dòng)態(tài)路由、重置路由、頁面刷新和動(dòng)態(tài)菜單等內(nèi)容。

1. 路由配置

安裝?vue-router

如果你還沒有安裝 vue-router，可以通過 npm 或 yarn 安裝：

npm install vue-router

或者

yarn add vue-router

基本配置

在 Vue 項(xiàng)目中，通常會(huì)在一個(gè)單獨(dú)的文件（如 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. 動(dòng)態(tài)導(dǎo)入

為了優(yōu)化應(yīng)用的加載速度，可以使用動(dòng)態(tài)導(dǎo)入（import()）來實(shí)現(xiàn)代碼分割。

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. 默認(rèn)路由

默認(rèn)路由通常用于重定向用戶到主頁或其他默認(rèn)頁面。可以通過 redirect 屬性來實(shí)現(xiàn)。

404 頁面用于處理未匹配到任何路由的情況?？梢酝ㄟ^一個(gè)通配符路由（*）來捕獲所有未匹配的路徑。

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. 嵌套路由

嵌套路由允許你在組件內(nèi)部嵌套子路由，非常適合實(shí)現(xiàn)多級(jí)菜單或復(fù)雜的頁面結(jié)構(gòu)。

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> 來顯示子路由的內(nèi)容：

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

5. 路由跳轉(zhuǎn)

可以通過 <router-link> 或編程式導(dǎo)航來實(shí)現(xiàn)路由跳轉(zhuǎn)。

使用?<router-link>

<template><div><h1>Home</h1><router-link to="/about/profile">Go to Profile</router-link></div>
</template>

編程式導(dǎo)航

export default {methods: {goToProfile() {this.$router.push('/about/profile');}}
};

6. 動(dòng)態(tài)路由

從后端獲取路由信息，并動(dòng)態(tài)地將這些信息傳入 vue-router。這種方式特別適用于需要根據(jù)后端配置動(dòng)態(tài)生成路由的場(chǎng)景，例如基于角色的路由權(quán)限控制或動(dòng)態(tài)菜單生成。

1. 后端返回的路由數(shù)據(jù)

假設(shè)后端返回的路由數(shù)據(jù)是一個(gè) JSON 格式，包含路徑、名稱和組件路徑。例如：

[{"path": "/admin","name": "Admin","componentPath": "components/AdminComponent.vue"},{"path": "/user","name": "User","componentPath": "components/UserComponent.vue"}
]

2. 動(dòng)態(tài)加載組件

在 Vue 中，可以通過 import() 動(dòng)態(tài)加載組件。為了方便管理，可以將組件路徑存儲(chǔ)為字符串，并在需要時(shí)動(dòng)態(tài)加載。

創(chuàng)建動(dòng)態(tài)組件加載方法

在 src/utils 文件夾中創(chuàng)建一個(gè) dynamicImport.js 文件，用于動(dòng)態(tài)加載組件。

// src/utils/dynamicImport.js
export default function dynamicImport(componentPath) {return () => import(`@/${componentPath}`);
}

3. 獲取后端數(shù)據(jù)并動(dòng)態(tài)添加路由

在主組件（如 App.vue）中，使用 Axios 獲取后端數(shù)據(jù)，并動(dòng)態(tài)添加路由。

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;// 清空現(xiàn)有動(dòng)態(tài)路由this.dynamicRoutes = [];// 移除所有動(dòng)態(tài)添加的路由this.$router.options.routes.forEach(route => {if (route.name !== 'Home') {this.$router.removeRoute(route.name);}});// 動(dòng)態(tài)添加路由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 中，初始化路由配置。由于動(dòng)態(tài)路由是在組件中添加的，因此初始路由配置可以只包含默認(rèn)路由。

// 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}]
});

總結(jié)

通過使用字符串拼接的方式動(dòng)態(tài)加載組件，你可以根據(jù)后端返回的路由配置動(dòng)態(tài)生成路由。這種方法特別適用于需要根據(jù)用戶角色或權(quán)限動(dòng)態(tài)生成路由的場(chǎng)景，例如多租戶系統(tǒng)或角色管理系統(tǒng)。通過動(dòng)態(tài)加載組件，可以實(shí)現(xiàn)代碼分割，優(yōu)化應(yīng)用的加載速度。

7.頁面刷新

使用 localStorage 或 sessionStorage 來存儲(chǔ)用戶角色或權(quán)限信息，并根據(jù)這些信息動(dòng)態(tài)生成路由，是一種常見的解決方案。這種方式可以避免每次頁面刷新或用戶切換角色時(shí)重新從后端獲取路由信息，從而提高應(yīng)用的性能和用戶體驗(yàn)。

1. 使用?localStorage?或?sessionStorage

區(qū)別

• localStorage：數(shù)據(jù)存儲(chǔ)在瀏覽器中，直到手動(dòng)清除，即使關(guān)閉瀏覽器后數(shù)據(jù)仍然存在。

• sessionStorage：數(shù)據(jù)存儲(chǔ)在瀏覽器會(huì)話中，關(guān)閉瀏覽器標(biāo)簽或窗口后數(shù)據(jù)會(huì)被清除。

對(duì)于用戶角色或權(quán)限信息，通常使用 localStorage，因?yàn)檫@些信息在用戶登錄后需要持久化，直到用戶主動(dòng)登出。

2. 示例：使用?localStorage?動(dòng)態(tài)生成路由

后端返回的路由數(shù)據(jù)

假設(shè)后端返回的路由數(shù)據(jù)是一個(gè) JSON 格式，包含路徑、名稱和組件路徑。例如：

[{"path": "/admin","name": "Admin","componentPath": "components/AdminComponent.vue"},{"path": "/user","name": "User","componentPath": "components/UserComponent.vue"}
]

動(dòng)態(tài)組件加載方法

在 src/utils 文件夾中創(chuàng)建一個(gè) dynamicImport.js 文件，用于動(dòng)態(tài)加載組件。

// src/utils/dynamicImport.js
export default function dynamicImport(componentPath) {return () => import(`@/${componentPath}`);
}

獲取后端數(shù)據(jù)并動(dòng)態(tài)添加路由

在主組件（如 App.vue）中，使用 Axios 獲取后端數(shù)據(jù)，并動(dòng)態(tài)添加路由。同時(shí)，將路由信息存儲(chǔ)到 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;// 將路由信息存儲(chǔ)到 localStoragelocalStorage.setItem('userRoutes', JSON.stringify(routes));}// 清空現(xiàn)有動(dòng)態(tài)路由this.dynamicRoutes = [];// 移除所有動(dòng)態(tài)添加的路由this.$router.options.routes.forEach(route => {if (route.name !== 'Home') {this.$router.removeRoute(route.name);}});// 動(dòng)態(tài)添加路由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 中，初始化路由配置。由于動(dòng)態(tài)路由是在組件中添加的，因此初始路由配置可以只包含默認(rèn)路由。

// 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. 用戶切換角色或重新登錄

在用戶切換角色或重新登錄時(shí)，需要清除 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;// 將路由信息存儲(chǔ)到 localStoragelocalStorage.setItem('userRoutes', JSON.stringify(routes));}// 清空現(xiàn)有動(dòng)態(tài)路由this.dynamicRoutes = [];// 移除所有動(dòng)態(tài)添加的路由this.$router.options.routes.forEach(route => {if (route.name !== 'Home') {this.$router.removeRoute(route.name);}});// 動(dòng)態(tài)添加路由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() {// 用戶切換角色或重新登錄時(shí)調(diào)用// 清除 localStorage 中的路由信息localStorage.removeItem('userRoutes');this.fetchRoutes();}
}