Vue中使用路由

---

单页应用程序：SPA - Single Page Application

• 单页面应用(SPA)：所有功能都在一个html页面上实现。

开发分类	实现方式	页面性能	开发效率	用户体验	学习成本	首屏加载	SEO
单页	一个html页面	按需更新，性能高	高	非常好	高	慢	差
多页	多个html页面	整页更新，性能低	中等	一般	中等	快	优

应用场景：

• 单页面应用：系统类网站 / 内部网站 / 文档类网站 / 移动端站点
• 多页面应用：公司官网 / 电商类网站

单页面应用程序，之所以开发效率高，性能高，用户体验好，最大的原因就是：页面按需更新。

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

访问路径和组件的对应关系通过路由确定。

路由

路由就是一种映射关系。

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

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

VueRouter

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

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

官网：http://v3.router.vuejs.org/zh/

VueRouter使用步骤

五个基础步骤（固定）：

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

   yarn add vue-router@3.6.5

   • Vue2 VueRouter3.x Vue3.x
   • Vue3 VueRouter4.x Vue4.x

2. 引入：

   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')
   

2个核心步骤：

1. 创建需要的组件（views目录），配置路由规则：

   import Find from './views/Find.vue'
   import My from './views/My.vue'
   import Friend from './views/Friend.vue'const router = new VueRouter({routes: [{ path: '/find', component: Find },{ path: '/my', component: My },{ path: '/friend', component: Friend },]
   })
   

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>
   

组件存放目录问题

.vue文件分两类——页面组件和复用组件，但本质无区别，分类是为了更容易维护。

• src/views文件夹
  • 页面组件 - 页面展示 - 配合路由用
• src/components文件夹
  • 复用组件 - 展示数据 - 常用于复用

路由模块封装

目标：将路由模块抽离出来。

好处：拆分模块，利于维护。

声明式导航 - 导航连接

需求：实现导航高亮效果。

vue-router提供了一个全局组件router-link（取代a标签）

• 能跳转，配置to属性指定路径（必须）。本质还是a标签，to无需 #
• 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

两个类名

router-link自动给当前导航添加了两个高亮类名。

区别：

• router-link-active 模糊匹配（用的多）
  • to="/my"可以匹配 /my /my/a /my/b
• router-link-exact-active 精确匹配
  • to="/my"只可以匹配 /my

自定义匹配类名

router-link的两个高亮类名太长，我们可以自定义类名：

const router = new VueRouter({routes: [...],linkActiveclass: "类名1", // 配置模糊匹配的类名linkExactActiveClass: "类名2" // 配置精确匹配的类名
})

声明式导航 - 跳转传参

目标：在跳转路由时，进行传值。

1. 查询参数传参（适合串多个参数）

   • 语法格式：to="/path?参数名=值"

   • 对应页面组件接收传递过来的值：$route.query.参数名

2. 动态路由传参（穿单个参数方便）

   • 配置动态路由

     const router = new VueRouter({routes: {...,{path: '/search/:words', // 配置参数名component: Search}}
     })
     

   • 配置导航链接：to="/path/参数值"

   • 对应页面组件接收传递过来的值：$route.params.参数名

问题：配了路由path: "/search/:words"为什么按下面步骤操作，会匹配到组件显示空白？

原因：/search/:words表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符 “?”，例如：/search/:words?

Vue路由 - 重定向

问题：网页打开，url默认是 / 路径，为匹配到组件时，会出现空白。

说明：重定向 —— 匹配path后，强制跳转path路径

语法：{ path: 匹配路径, redirect: 重定向到的路径 }

const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '/search/:words', component: Search },]
})

Vue路由 - 404

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

位置：配在路由最后

语法：path: "*"表示匹配任意路径 - 前面不匹配就命中最后这个。

Vue路由 - 模式设置

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

• hash路由（默认） 例如：http://localhost:8080/#/home

• history路由（常用） 例如：http://localhost:8080/home (以后上线需要服务端支持)

  const router = new VueRouter({routes,mode: "history"
  })
  

编程式导航 - 基本跳转

编程式导航：用JavaScript代码实现点击按钮跳转。

两种语法：

1. path路径跳转（简易方便）

   this.$router.push('路由路径')
   this.$router.push({path: '路由路径'
   })
   

2. name命名路由跳转（适合path路径长的场景）

   this.$router.push({name: '路由名'
   })
   

   { name: '路由名', path: '/path/xxx', component: xxx }
   

编程式导航 - 路由传参

两种传参方式：查询参数+动态路由传参

两种跳转方式，对于两种传参方式都支持：

1. path路径跳转传参

   • query传参

     this.$router.push('/路径?参数名1=参数值1&参数名2=参数值2')
     this.$router.push({path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2',}
     })
     

   • 动态路由传参（需要配置动态路由）

   this.$router.push('/路径/参数值')
   this.$router.push({path: '/路径/参数值',query: {参数名: 参数值,}
   })
   

2. name命名路由跳转传参

   • query传参

     this.$router.push({name: '路由名字',params: {参数名: 参数值,}
     })
     

   • 动态路由传参

     this.$router.push({name: 'search',params: {words: this.inpValue}
     })
     

组件缓存 keep-alive

问题：从面经页点到详情页，又点返回，数据重新加载了，但我希望能回到原来的位置。

原因：路由加载，组件被销毁了，返回回来组件又被重建了，所以数据重新被加载。

keep-alive是什么：

keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive是一个抽象组件：它自身不会渲染成一个DOM元素，也不会出现在父组件链中。

keep-alive的优点：

在组件切换过程中把切换出去的组件保留在内存中，放置重复渲染DOM，减少加载时间及性能消耗。

<template><div class="h5-wrapper"><keep-alive><router-view></router-view></keep-alive></div>
</template>

问题：缓存了所有被切换的组件

keep-alive的三个属性：

• include：组件名数组，只有匹配的组件会被缓存
• exclude：组件名数组，任何匹配的组件都不会被缓存
• max：最多可以缓存多少组件实例

keep-alive的使用会触发两个生命周期函数（了解）

• activated当组件被激活（使用）的时候触发 —— 进入页面触发
• deactivated当组件不被使用的时候触发 —— 离开页面触发

返回上一个组件

语法：$router.back()

作用：返回上一个组件。