vue2Day06----路由-拓冰建站

一、单页应用程序介绍

二、路由介绍

三、路由的基本使用

四、组件的存放目录问题

五、路由的封装抽离

六、声明式导航-导航链接

七、声明式导航-两个类名

八、声明式导航-自定义类名（了解）

九、声明式导航-查询参数传参

十、声明式导航-动态路由传参

十一、动态路由参数的可选符(了解)

十二、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.单页面应用优缺点?
优点：按需更新性能高，开发效率高，用户体验好
缺点：学习成本，首屏加载慢，不利于SEO
3.单页应用场景？
系统类网站，内部网站，文档类网站，移动端站点
4.单页之所以开发效率高，用户体验好最大的原因：页面按需更新

二、路由介绍

1.思考：

单页面应用程序，之所以开发效率高，性能好，用户体验好

最大的原因就是：页面按需更新

比如当点击【发现音乐】和【关注】时，**只是更新下面部分内容**，对于头部是不更新的

要按需更新，首先就需要明确：访问路径和组件的对应关系！

访问路径和组件的对应关系如何确定呢?路由

2.路由的介绍

生活中的路由：设备和ip的映射关系

Vue中的路由：路径和组件的映射关系

3.总结

- 什么是路由？路由是一种映射关系
- Vue中的路由是什么路径和组件的映射关系

三、路由的基本使用

1.目标：认识插件 VueRouter，掌握 VueRouter 的基本使用步骤

2.作用：**修改**地址栏路径时，**切换显示**匹配的**组件**

3.说明：Vue 官方的一个路由插件，是一个第三方包

4.官网：<https://v3.router.vuejs.org/zh/>

5.VueRouter的使用（5+2）

固定5个固定的步骤（不用死背，熟能生巧）

1. 下载 VueRouter 模块到当前工程，版本3.6.5

yarn add vue-router@3.6.5

2. main.js中引入VueRouter

import VueRouter from 'vue-router'

3. 安装注册

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 class="footer_wrap"> <a href="#/find">发现音乐</a> <a href="#/my">我的音乐</a> <a href="#/friend">朋友</a> </div> <div class="top"> <router-view></router-view> </div>

8.总结：

1. 如何实现路径改变，对应组件切换,应该使用哪个插件?
Vue官方插件VueRouter
2. Vue-Router的使用步骤是什么(5+2)?
五个基础步骤：(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-linkto="path的值">发现音乐</router-link>

<div> <div class="footer_wrap"> <router-link to="/find">发现音乐</router-link> <router-link to="/my">我的音乐</router-link> <router-link to="/friend">朋友</router-link> </div> <div class="top"> <!-- 路由出口 → 匹配的组件所展示的位置 --> <router-view></router-view> </div> </div>

3.通过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-link>
router-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" 仅可以匹配 /my

3.在地址栏中输入二级路由查看类名的添加

八、声明式导航-自定义类名（了解）

1.问题： router-link的**两个高亮类名太长了**，我们希望能定制怎么办

2.解决方案

我们可以在创建路由对象时，额外配置两个配置项即可。(记link就好，会自动补全)

`linkActiveClass` 和 `linkExactActiveClass`

const 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.vue

<template> <div id="app"> <div class="link"> <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; } </style>

Home.vue

<template> <div class="home"> <div class="logo-box"></div> <div class="search-box"> <input type="text"> <button>搜索一下</button> </div> <div class="hot-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; } </style>

Search.vue

<template> <div class="search"> <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; } </style>

router/index.js

import 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 router

main.js

import 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路由--404

1.作用：当路径找不到匹配时，给个提示页面

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.vue

<template> <div> <h1>404 Not Found</h1> </div> </template>

router/index.js

... import NotFound from '@/views/NotFound' ... // 创建了一个路由对象 const router = new VueRouter({ routes: [ ... { path: '*', component: NotFound } ] }) export default router

十四、Vue路由-模式设置

1.问题：路由的路径看起来不自然, 有#，能否切成真正路径形式?

hash路由(默认) 例如: http://localhost:8080/#/home
history路由(常用) 例如: 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('路由路径') //方式1

this.$router.push({ //方式2
path：'路由路径'
})

② 通过路由名字跳转(适合路径名字长的场景)
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视频后结合老师笔记做的笔记，原视频链接:【前端最新Vue2+Vue3基础入门到实战项目全套教程，自学前端vue就选黑马程序员，一套全通关！】 https://www.bilibili.com/video/BV1HV4y1a7n4/?p=80&share_source=copy_web&vd_source=c49c86c0acb198e4f36c3648d2b132e9