Spring Boot+Vue全栈应用开发实践 课件21 Vue Router 路由管理

罗荣良VueRouter路由管理本节学习目标1.理解SPA(单页应用)与前端路由原理2.掌握VueRouter4的基础配置3.熟练使用路由组件<router-link>和<router-view>4.掌握动态路由匹配与参数获取(/user/:id)5.实现编程式导航(JS代码跳转)单页应用vs多页应用MPA(多页应用)：传统模式。点击链接->浏览器刷新->请求新HTML。SPA(单页应用)：Vue模式。点击链接->URL变了但不刷新->JS替换页面内容。核心优势：用户体验极佳，像原生App。VueRouter的角色定义：Vue.js官方的路由管理器。核心职责：建立URL与

组件

的映射关系。公式：URLPath(/home)➡️Component(Home.vue)命令：npminstallvue-router@4代码(router/index.js)：实战第一步：安装与配置路由配置表(routes)constroutes=[{path:'/',component:Home},{path:'/about',component:About}]注意：组件通常使用import懒加载优化性能。核心组件1：RouterView概念：路由出口(Outlet)。作用：它是页面上的一个“占位符”。当URL匹配到组件时，该组件就会渲染在这个占位符的位置。例如：电视机屏幕(View)和频道(Route)。

核心组件2：RouterLink概念：导航链接。作用：代替<a>标签。语法：<router-linkto="/about">关于</router-link>区别：<a>会导致页面刷新(差)，<router-link>不会刷新(好)。动态路由匹配场景：用户详情页。不能给每个用户写一个path。语法：path:'/user/:id'示例：/user/1->匹配User组件，id=1/user/2->匹配User组件，id=2获取路由参数：useRouteAPI：import{useRoute}from'vue-router'代码：constroute=useRoute()console.log(route.params.id)注意：route表示当前路由信息(名词)。场景：登录成功后，自动跳转到首页。API：import{useRouter}from'vue-router'代码：constrouter=useRouter()//登录成功后...router.push('/home')编程式导航：useRouter辨析：routevsrouter初学者最容易晕的就是这两个词。route(无r)：名词。表示当前这条路。包含params(参数),query(问号后面的参数)。如果你想获取信息，用它。router(有r)：名词/动词执行者。表示整个路由器。包含push(),go()。如果你想执行跳转，用它。口诀：查信息找route，做动作找router。嵌套路由(NestedRoutes)场景：后台管理系统。侧边栏不变，只有右侧内容变。配置：使用children属性。结构：父组件里再放一个<router-view>。场景：用户乱输网址。配置：{path:'/:pathMatch(.*)*',component:NotFound}原理：正则匹配所有剩余路径，放在路由表最后。404页面配置实战演示：简易导航系统演示内容：1.创建Home,About,User组件。2.配置router。3.App.vue放置Link和View。4.演示点击跳转和URL变化。本节小结与作业小结：配置路由、Link/Vie