第9课 Vue Router 路由为 Vue 应用配置多页面路由包括嵌套路由掌握声明式导航router-link与编程式导航useRouter掌握路由传参query 和 params使用导航守卫beforeEach实现登录拦截1. 路由概念与安装作用根据浏览器 URL 显示不同页面组件实现单页应用SPA内的多页面切换。安装需在项目根目录执行npminstallvue-router4核心三件套动作文件关键代码创建路由表 路由器src/router/index.jscreateRouter({ history, routes })注册路由src/main.jsapp.use(router)路由出口src/App.vuerouter-view /2. 基本配置2.1 路由表 (src/router/index.js)import{createRouter,createWebHistory}fromvue-routerimportLoginViewfrom../views/LoginView.vueconstroutercreateRouter({history:createWebHistory(),// History 模式无 #routes:[{path:/,redirect:/dashboard},{path:/login,name:login,component:LoginView},{path:/dashboard,name:dashboard,component:()import(../views/DashboardView.vue)}]})exportdefaultrouter路由记录字段pathURL 路径“门牌号”component对应组件“房间”name命名路由“昵称”用于编程式跳转redirect访问path时自动重定向2.2 注册路由 (main.js)import{createApp}fromvueimportAppfrom./App.vueimportrouterfrom./routercreateApp(App).use(router).mount(#app)2.3 路由出口 (App.vue)template router-view / /template3. 嵌套路由主布局 子页面场景后台系统有公共的顶部栏、侧边菜单页面切换只改变内容区。实现创建主布局组件MainLayout.vue内部也放置router-view /路由表配置children子页面的path不能以/开头// router/index.jsimportMainLayoutfrom../layouts/MainLayout.vueroutes:[{path:/login,name:login,component:LoginView},// 独立不套主布局{path:/,component:MainLayout,redirect:/dashboard,children:[{path:dashboard,name:dashboard,component:()import(../views/DashboardView.vue)},{path:users,name:users,component:()import(../views/UserListView.vue)},{path:users/:id,name:user-detail,component:()import(../views/UserDetailView.vue)}]}]:id是动态路由参数见路由传参子路由使用懒加载() import(...)可加快首屏加载4. 声明式导航router-link用于模板中用户点击切换页面的链接。router-linkto/dashboardclassmenu-item首页/router-link特点不会触发整页刷新当前路由对应的链接会自动添加router-link-active类可用于高亮样式.menu-item.router-link-active{background:#4f46e5;color:#fff;}对象写法推荐用namerouter-link:to{ name: dashboard }首页/router-link5. 编程式导航useRouter在脚本中控制跳转如登录成功后、按钮点击后。import{useRouter}fromvue-routerconstrouteruseRouter()// 跳转添历史记录router.push(/dashboard)router.push({name:user-detail,params:{id:3}})// 替换不留历史记录常用于登录成功router.replace({name:login})// 前进/后退router.back()router.forward()push vs replacepush可后退replace不可后退。6. 路由传参6.1 路径参数 (params) —— 动态路由定义path: users/:id跳转必须用namerouter.push({name:user-detail,params:{id:user.id}})读取import{useRoute}fromvue-routerconstrouteuseRoute()console.log(route.params.id)// 注意值是字符串6.2 查询参数 (query)跳转router.push({path:/users,query:{keyword:张,status:在职}})// URL: /users?keyword张status在职读取route.query.keyword// 张对比paramsqueryURL形式/users/3/users?id3定义路由表 path 中用:id无需额外定义跳转语法{ name, params }{ path/name, query }刷新后丢失否在 URL 里否params必须搭配name使用不能直接用path传参。7. 导航守卫登录拦截全局前置守卫beforeEach每次路由跳转前检查控制访问权限。实现在router/index.js中router.beforeEach((to,from,next){constisLoginlocalStorage.getItem(isLogin)trueif(to.path!/login!isLogin){next({name:login})// 未登录重定向到登录页}else{next()// 放行}})三个参数to目标路由对象from来源路由对象next()放行 / 重定向关键点登录页必须放行to.path ! /login否则会导致死循环登录成功时写入localStorage.setItem(isLogin, true)退出登录时清除localStorage.removeItem(isLogin)并跳转8. 项目文件结构速查src/ ├── main.js # 注册路由 ├── App.vue # 一级出口 ├── router/ │ └── index.js # 路由表 守卫 ├── layouts/ │ └── MainLayout.vue # 主布局公共外壳包含二级出口 └── views/ ├── LoginView.vue ├── DashboardView.vue ├── UserListView.vue └── UserDetailView.vue9. 常见错误排查现象原因解决页面空白终端报错Failed to resolve component: RouterView未安装或未注册路由npm install vue-router4并app.use(router)子页面出现但无主布局顶栏/侧栏消失子路由 path 以/开头去掉开头的/params 传参后地址栏没有参数使用path而非name改为{ name, params }菜单点击不高亮未正确使用router-link-active类确保 CSS 选择器为.menu-item.router-link-active未登录也能访问后台守卫未配置或 localStorage 残留旧值添加beforeEach测试前清空 localStorage守卫导致无法登录无限重定向登录页也被拦截条件中增加to.path ! /login登录后按后退回到登录页登录跳转用了push改用router.replace详情页拿到的 id 参与计算出错route.params.id是字符串使用Number(route.params.id)转换核心总结路由 前台根据 URL 映射组件嵌套路由 公共布局 子页面children导航router-link声明式/useRouter编程式传参query?keyval适合筛选条件params/users/:id适合资源标识守卫beforeEach做登录拦截记住放行登录页登录成功用replace退出时清除登录态并跳转