最近需要做一个单页面应用，于是就用到了Vue Router。简直是太好用了。就写了一篇文章记录了一下。

Vue Router 是 Vue.js 官方的路由管理器，它允许构建单页面应用，使得用户在不同视图间切换而无需重新加载页面。

用法详解

1. 安装 Vue Router
2. 通过 npm 安装 Vue Router：

npm install vue-router

1. 确保安装的版本与 Vue.js 的版本兼容。
2. 配置基础路由

1创建路由配置文件（通常是 router/index.js 或 router.js），定义路由和组件的映射关系：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';

Vue.use(VueRouter);

const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];

const router = new VueRouter({
mode: 'history',
routes
});

export default router;
在 main.js 中引入并使用路由：import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
router,
render: h => h(App)
}).$mount('#app');
在 App.vue 中使用 <router-link> 和 <router-view>：<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>

1. 通过 <router-link> 创建导航链接，<router-view> 展示当前路由对应的组件。
2. 动态路由配置
3. 动态添加路由，例如在用户登录后添加个人资料页面：

import Profile from '@/components/Profile.vue';
router.addRoute({
path: '/profile',
name: 'Profile',
component: Profile
});

1. 动态添加嵌套路由：

router.addRoute('ParentRouteName', {
path: 'child',
name: 'ChildRouteName',
component: () => import('@/components/Child.vue')
});

1. 动态路由完整实现示例：

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount('#app');

// router.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);
const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
});

export default router;

// 动态添加路由
function loadDynamicRoutes() {
const permissions = ['home', 'about', 'profile']; // 示例权限列表
permissions.forEach(permission => {
if (permission === 'profile') {
router.addRoute({
path: '/profile',
name: 'Profile',
component: () => import('@/components/Profile.vue')
});
}
});
}

// 调用函数加载动态路由
loadDynamicRoutes();

1. 动态路由可以根据用户权限或其他条件动态添加。

使用场景

1. 模块懒加载
2. 对于大型应用，为了优化性能，可以按需加载不同模块的路由。
3. 多级菜单动态生成
4. 在后台管理系统中，菜单项和对应的路由可能是动态生成的。可以根据后台返回的菜单配置，动态生成对应的路由。
5. 权限控制
6. 根据用户的权限动态加载不同的路由，例如只有管理员才能访问的页面。
7. SPA（单页面应用）开发
8. Vue Router 使得在单页面应用中实现多视图切换成为可能，无需重新加载整个页面。

创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦

小伙伴们在工作中还遇到过其他应用场景吗，欢迎评论区留言讨论哦。