目录一、单页应用程序介绍二、路由介绍三、路由的基本使用四、组件的存放目录问题五、路由的封装抽离六、声明式导航-导航链接七、声明式导航-两个类名八、声明式导航-自定义类名了解九、声明式导航-查询参数传参十、声明式导航-动态路由传参十一、动态路由参数的可选符(了解)十二、Vue路由--重定向十三、Vue路由--404十四、Vue路由-模式设置十五、编程式导航-两种路由跳转方式十六、编程式导航-path路径跳转传参2.两种传参方式① path 路径跳转传参1.查询参数2.动态路由传参② name 命名路由跳转传参1.query传参2.params传参​编辑一、单页应用程序介1.概念单页应用程序SPA【Single Page Application】是指所有的功能都在一个html页面上实现2.具体示例单页应用网站 网易云音乐 https://music.163.com/多页应用网站京东 https://jd.com/3.单页应用 VS 多页面应用单页应用类网站系统类网站 / 内部网站 / 文档类网站 / 移动端站点多页应用类网站公司官网 / 电商类网站4.总结1.什么是单页面应用程序?所有的功能在一个html页面上2.单页面应用优缺点?优点按需更新性能高开发效率高用户体验好缺点学习成本首屏加载慢不利于SEO3.单页应用场景系统类网站内部网站文档类网站移动端站点4.单页之所以开发效率高用户体验好最大的原因页面按需更新二、路由介绍1.思考单页面应用程序之所以开发效率高性能好用户体验好最大的原因就是页面按需更新比如当点击【发现音乐】和【关注】时**只是更新下面部分内容**对于头部是不更新的要按需更新首先就需要明确访问路径和组件的对应关系访问路径和组件的对应关系如何确定呢?路由2.路由的介绍生活中的路由设备和ip的映射关系Vue中的路由路径和组件的映射关系3.总结- 什么是路由 路由是一种映射关系- Vue中的路由是什么路径和组件的映射关系三、路由的基本使用1.目标认识插件 VueRouter掌握 VueRouter 的基本使用步骤2.作用**修改**地址栏路径时**切换显示**匹配的**组件**3.说明Vue 官方的一个路由插件是一个第三方包4.官网https://v3.router.vuejs.org/zh/5.VueRouter的使用52固定5个固定的步骤不用死背熟能生巧1. 下载 VueRouter 模块到当前工程版本3.6.5yarn add vue-router3.6.52. main.js中引入VueRouterimport VueRouter from vue-router3. 安装注册Vue.use(VueRouter)4. 创建路由对象const router new VueRouter()5. 注入将路由对象注入到new Vue实例中建立关联new Vue({ render: h h(App), router:router }).$mount(#app)当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了6.两个核心步骤1. 创建需要的组件 (views目录)配置路由规则2. 配置导航配置路由出口(路径匹配的组件显示的位置)div classfooter_wrap a href#/find发现音乐/a a href#/my我的音乐/a a href#/friend朋友/a /div div classtop router-view/router-view /div8.总结1. 如何实现 路径改变对应组件 切换,应该使用哪个插件?Vue官方插件VueRouter2. Vue-Router的使用步骤是什么(52)?五个基础步骤(1)下包 (2) 引入 (3) Vue.use安装注册 (4) 创建路由对象 (5)注入Vue实例两个核心步骤(1) 创建组件配置规则(路径组件的匹配关系)(2)配导航配置路由出口 router-view(组件展示的位置)四、组件的存放目录问题注意 vue文件 本质无区别1.组件分类.vue文件分为2类都是 .vue文件本质无区别页面组件 配置路由规则时使用的组件复用组件多个组件中都使用到的组件2.存放目录分类开来的目的就是为了更易维护1. src/views文件夹页面组件 - 页面展示 - 配合路由用2. src/components文件夹复用组件 - 展示数据 - 封装复用五、路由的封装抽离1.问题所有的路由配置都在main.js中合适吗2.目标将路由模块抽离出来。 好处拆分模块利于维护3.路径简写脚手架环境下 指代src目录可以用于快速引入组件4.总结路由模块的封装抽离的好处是什么拆分模块利于维护以后如何快速引入组件基于指代src目录从src目录出发找组件六、声明式导航-导航链接1.需求:实现导航高亮效果如果使用a标签进行跳转的话需要给当前跳转的导航加样式同时要移除上一个a标签的样式太麻烦2.解决方案vue-router 提供了一个全局组件 router-link (取代 a 标签)能跳转配置 to 属性指定路径(**必须**) 。本质还是 a 标签 **to 无需 #**能高亮默认就会提供**高亮类名**可以直接设置高亮样式语法 router-linktopath的值发现音乐/router-linkdiv div classfooter_wrap router-link to/find发现音乐/router-link router-link to/my我的音乐/router-link router-link to/friend朋友/router-link /div div classtop !-- 路由出口 → 匹配的组件所展示的位置 -- router-view/router-view /div /div3.通过router-link自带的两个样式进行高亮使用router-link跳转后我们发现。当前点击的链接默认加了两个class的值router-link-exact-active 和 router-link-active我们可以给任意一个class属性添加高亮样式即可实现功能4.总结router-link是什么vue-router提供的全局组件用于替换a标签router-link怎么用router-link to/路径值/router-linkrouter-link的好处是什么能跳转能高亮自带激活时的类名七、声明式导航-两个类名当我们使用router-link/router-link跳转时自动给当前导航加了**两个类名**1.router-link-active 模糊匹配用的多to/my 不仅可以匹配/my 还可以匹配其子目录如 /my/a /my/b ....只要是以/my开头的路径 都可以和 to/my匹配到2.router-link-exact-active 精确匹配to/my 仅可以匹配 /my3.在地址栏中输入二级路由查看类名的添加八、声明式导航-自定义类名了解1.问题 router-link的**两个高亮类名 太长了**我们希望能定制怎么办2.解决方案我们可以在创建路由对象时额外配置两个配置项即可。(记link就好会自动补全)linkActiveClass 和 linkExactActiveClassconst router new VueRouter({ routes: [...], linkActiveClass: 类名1, linkExactActiveClass: 类名2 })3.代码演示// 创建了一个路由对象 const router new VueRouter({ routes: [ ... ], linkActiveClass: active, // 配置模糊匹配的类名 linkExactActiveClass: exact-active // 配置精确匹配的类名 })九、声明式导航-查询参数传参1.目标在跳转路由时进行传参比如现在我们在搜索页点击了热门搜索链接跳转到详情页需要把点击的内容带到详情页该怎么办呢2.跳转传参我们可以通过两种方式在跳转的时候把所需要的参数传到其他页面中- 查询参数传参- 动态路由传参3.查询参数传参如何传参router-link to/path?参数名值/router-link如何接受参数固定用法$router.query.参数名4.查询参数传参----代码演示App.vuetemplate div idapp div classlink router-link to/home首页/router-link router-link to/search搜索页/router-link /div router-view/router-view /div /template script export default {}; /script style scoped .link { height: 50px; line-height: 50px; background-color: #495150; display: flex; margin: -8px -8px 0 -8px; margin-bottom: 50px; } .link a { display: block; text-decoration: none; background-color: #ad2a26; width: 100px; text-align: center; margin-right: 5px; color: #fff; border-radius: 5px; } /styleHome.vuetemplate div classhome div classlogo-box/div div classsearch-box input typetext button搜索一下/button /div div classhot-link 热门搜索 router-link to黑马程序员/router-link router-link to前端培训/router-link router-link to如何成为前端大牛/router-link /div /div /template script export default { name: FindMusic } /script style .logo-box { height: 150px; background: url(/assets/logo.jpeg) no-repeat center; } .search-box { display: flex; justify-content: center; } .search-box input { width: 400px; height: 30px; line-height: 30px; border: 2px solid #c4c7ce; border-radius: 4px 0 0 4px; outline: none; } .search-box input:focus { border: 2px solid #ad2a26; } .search-box button { width: 100px; height: 36px; border: none; background-color: #ad2a26; color: #fff; position: relative; left: -2px; border-radius: 0 4px 4px 0; } .hot-link { width: 508px; height: 60px; line-height: 60px; margin: 0 auto; } .hot-link a { margin: 0 5px; } /styleSearch.vuetemplate div classsearch p搜索关键字: 黑马程序员/p p搜索结果: /p ul li............./li li............./li li............./li li............./li /ul /div /template script export default { name: MyFriend, created () { // 在created中获取路由参数 } } /script style .search { width: 400px; height: 240px; padding: 0 20px; margin: 0 auto; border: 2px solid #c4c7ce; border-radius: 5px; } /stylerouter/index.jsimport Home from /views/Home import Search from /views/Search import Vue from vue import VueRouter from vue-router Vue.use(VueRouter) // VueRouter插件初始化 // 创建了一个路由对象 const router new VueRouter({ routes: [ { path: /home, component: Home }, { path: /search, component: Search } ] }) export default routermain.jsimport router from ./router/index ... new Vue({ render: h h(App), router }).$mount(#app) 十、声明式导航-动态路由传参1.动态路由传参方式(1)配置动态路由 --- 动态路由后面的参数可以随便起名但要有语义不能省略/search/:words 代表/search后面的都能匹配const router new VueRouter({ routes: [ ..., { path: /search/:words, component: Search } ] })(2)配置导航链接to/path/参数值(3)对应页面组件接收参数$route.**params**.参数名 params后面的参数名要和动态路由配置的参数保持一致2.查询参数传参 VS 动态路由传参(1) 查询参数传参 (比较适合传**多个参数**)跳转to/path?参数名值参数名2值获取$route.query.参数名(2) 动态路由传参 (**优雅简洁**传单个参数比较方便)配置动态路由path: /path/:参数名跳转to/path/参数值获取$route.params.参数名注意动态路由也可以传多个参数但一般只传一个3.总结声明式导航跳转时, 有几种方式传值给路由页面①查询参数传参(多个参数)跳转to/path?参数名值接收$route.query.参数名②动态路由传参(简洁优雅)路由/path/:参数名跳转: to/path/值接收$route.params.参数名十一、动态路由参数的可选符(了解)1.问题配了路由 path:/search/:words 为什么按下面步骤操作会未匹配到组件显示空白2.原因/search/:words 表示必须要传参数如果不传参数也希望匹配可以加个可选符const router new VueRouter({ routes: [ ... { path: /search/:words?, component: Search } ] })十二、Vue路由--重定向1.问题网页打开时 url 默认是 / 路径未匹配到组件时会出现空白2.解决方案重定向 →匹配 / 后, 强制跳转 /home 路径3.语法{ path: 匹配路径, redirect: 重定向到的路径 },比如{ path:/ ,redirect:/home }4.代码演示 router文件夹下的index.js里的const router new VueRouter({ routes: [ { path: /, redirect: /home}, ... ] })十三、Vue路由--4041.作用当路径找不到匹配时给个提示页面2.位置404的路由虽然配置在任何一个位置都可以但一般都配置在其他路由规则的最后面3.语法path里的 * 意思是前面不匹配就命中最后这个{ path:* ,redirect:重定向的路径}import NotFind from /views/NotFind const router new VueRouter({ routes: [ ... { path: *, component: NotFind } //最后一个 ] })4.代码示例含NotFound.vue和index.js中的修改NotFound.vuetemplate div h1404 Not Found/h1 /div /templaterouter/index.js... import NotFound from /views/NotFound ... // 创建了一个路由对象 const router new VueRouter({ routes: [ ... { path: *, component: NotFound } ] }) export default router十四、Vue路由-模式设置1.问题路由的路径看起来不自然, 有#能否切成真正路径形式?hash路由(默认) 例如: http://localhost:8080/#/homehistory路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持开发环境webpack给规避掉了history模式的问题)2.语法 mode:histroy,const router new VueRouter({ mode:histroy, //默认是hash现在修改后是history路由 routes:[] })十五、编程式导航-两种路由跳转方式1.问题点击按钮跳转如何实现2.方案编程式导航→用JS代码来进行跳转3.语法两种语法- path 路径跳转 简易方便- name 命名路由跳转 (适合 path 路径长的场景)4.path路径跳转语法 特点简易方便//简单写法 this.$router.push(路由路径) //完整写法 this.$router.push({ path: 路由路径 })5.代码演示 path跳转方式6.name命名路由跳转特点适合 path 路径长的场景语法 路由规则必须配置name配置项 通过name来进行跳转js { name: 路由名, path: /path/xxx, component: XXX }, //通过name来进行跳转 js this.$router.push({ name: 路由名 }) 7.代码演示通过name命名路由跳转8.总结编程式导航有几种跳转方式① 通过路径跳转 (简易方便)this.$router.push(路由路径) //方式1this.$router.push({ //方式2path路由路径})② 通过路由名字跳转(适合路径名字长的场景)this.$router.push({name路由名}){ name:路由名, path:/path/xxx,... }, //这个要提前在js里配好name十六、编程式导航-path路径跳转传参1.问题点击搜索按钮跳转需要把文本框中输入的内容传到下一个页面如何实现2.两种传参方式① path 路径跳转传参1.查询参数简写(1) this.$router.push(路由路径?参数名参数值)完整写法更适合传参(2) this.$router.push({path: 路由路径query:{参数名参数值,参数名参数值}})2.动态路由传参② name 命名路由跳转传参1.query传参2.params传参注意path不能配合params使用注本文是观看bilibili视频后结合老师笔记做的笔记原视频链接:【前端最新Vue2Vue3基础入门到实战项目全套教程自学前端vue就选黑马程序员一套全通关】 https://www.bilibili.com/video/BV1HV4y1a7n4/?p80share_sourcecopy_webvd_sourcec49c86c0acb198e4f36c3648d2b132e9