以上代码实现了Vue的动态路由功能，主要包含以下部分：

1. 基础路由配置：定义了首页和登录页
2. 路由守卫：在访问需要认证的路由前检查token
3. 动态路由添加：在用户认证通过后动态添加仪表盘路由
4. 登录组件：模拟登录过程并存储token

当用户登录成功后，系统会动态添加仪表盘路由，实现了路由的动态加载。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';

Vue.use(VueRouter);

const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: { requiresAuth: true }
},
{
path: '/login',
name: 'Login',
component: Login
}
];

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

// 路由守卫
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
const token = localStorage.getItem('token');
if (!token) {
next({ name: 'Login' });
} else {
// 动态添加路由
if (!router.hasRoute('Dashboard')) {
router.addRoute({
path: '/dashboard',
name: 'Dashboard',
component: () => import('./views/Dashboard.vue'),
meta: { requiresAuth: true }
});
}
next();
}
} else {
next();
}
});

export default router;