基础路由配置

// 路由定义示例
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]
Vue_Router

动态路由匹配

// 参数捕获示例
{ path: '/user/_id', component: UserProfile }
动态路由匹配

嵌套路由实践

// 嵌套路由配置
{
  path: '/dashboard',
  component: Dashboard,
  children: [
    { path: 'data', component: DataList }
  ]
}
嵌套路由

路由守卫使用

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 权限校验逻辑
  next()
})
路由守卫

扩展阅读

Vue.js_路由示意图