路由介绍

单页应用程序：指的是所有功能都在一个html页面实现的，通过路由实现页面的按需更新，只更新内容，头部标签等等保持不变，提高性能

具体实例：

单页应用网站：网易云音乐 https://music.163.com/
多页应用网站：京东 https://jd.com/

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

路由的使用

VueRouter：

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

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

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

下载 VueRouter 模块到当前工程，（Vue2 兼容的版本为3.6.5）

1	yarn add vue-router@3.6.5

main.js中引入VueRouter

1	import VueRouter from 'vue-router'

安装注册

1	Vue.use(VueRouter)

创建路由对象

1	const router = new VueRouter()

注入，将路由对象注入到new Vue实例中，建立关联

new Vue({
  render: h => h(App),
  router: router
}).$mount('#app')

当配置完成之后，浏览器地址就会自动添加/#/的后缀了，表示项目已经被Vue-Router接管了

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

配置导航，配置路由出口（路径匹配的组件现实的位置）

<router-view></router-view>为匹配的组件所展示的位置

组件存放目录问题

存放组件的文件夹有 views 和 components ，都是 .vue 文件，本质上是没有区别的，但在实际开发中需要进行区分

区别：

views文件夹：存放页面组件，用于页面展示，配合路由使用
components文件夹：存放复用组件，用于展示数据，常用于复用

路由模块封装

将路由模块进行封装抽离出来，有利于后期维护

创建 src/router/index.js 文件，用于存放路由模块

// src/router/index.js 编写路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'
  
Vue.use(VueRouter)
  
const router = new VueRouter()
  
export default router

// main.js 导入路由模块
import Vue from 'vue'
import App from './App.vue'
  
Vue.config.productionTip = false
  
new Vue({
  render: h => h(App),
  router: router
}).$mount('#app')

注意：绝对路径可以使用@指代src目录，可以快速引入组件

声明式导航

导航链接

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

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

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

两个类名

使用 router-link 标签，会自动添加两个高亮类名

router-link-active 模糊匹配（常用）
- to=”/my” 可以匹配 /my、/my/a、/my/b ….
- 只要是以/my开头的路径都可以和 to=”/my”匹配到
router-link-exact-active 精准匹配
- to=”/my” 仅可以匹配 /my

自定义类名

这两个类名太长了，咱可以自定义一下

const router = new VueRouter({
  routes: [...],
  linkActiveClass: "类名1",
  linkExactActiveClass: "类名2"
})

跳转传参

在跳转路由时，传递参数

查询参数传参
- 语法：to="/path?参数名=值"
- 对应网页接收参数：$router.query.参数名

动态路由传参

配置动态路由

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

配置导航链接：to="/path/参数值"
对应页面组件接收传递过来的值：$route.params.参数名

对比：

查询参数传参，比较适合传多个参数
- 跳转：to="/path?参数名=值&参数名2=值"
- 获取：$route.query.参数名
动态路由传参优雅简洁，传单个参数比较方便
- 配置动态路由：path: "/path/:参数名"
- 跳转：to="/path/参数值"
- 获取：$route.params.参数名
- 注意：动态路由也可以传多个参数，但一般只传一个

可选符：

当使用了动态路由传参path: "/path/:words"时，如果直接访问/path，也就是不传递参数的话，就无法匹配到页面

/search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"？"

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

重定向

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

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

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

404

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

位置：404的路由，虽然配置在任何一个位置都可以，但一般都配置在其他路由规则的最后面

语法：path: "*" (任意路径) – 前面不匹配就命中最后这个

const router = new VueRouter({
  routes: [
    ...
    { path: '*', component: NotFind } //最后一个
  ]
})

模式设置

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

hash路由(默认)，例如: http://localhost:8080/#/home
history路由(常用)，例如: http://localhost:8080/home (以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题)

语法：

const router = new VueRouter({
    mode:'histroy', //默认是hash
    routes:[]
})

编程式导航

基本跳转

当需要按钮跳转等操作时

path路径跳转：

//简单写法
this.$router.push('路由路径')
//完整写法
this.$router.push({
  path: '路由路径'
})

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

路由规则，必须配置name配置项

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

通过name来进行跳转

1
2
3

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

路由传参

path路径跳转传参（query传参）：

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

path路径跳转传参（动态路由传参）：

//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
  path: '/路径/参数值'
})

name命名路由跳转传参（query传参）：

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

**name命名路由跳转传参 (动态路由传参)**：

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

组件缓存 keep-alive

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

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

优点：在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

keep-alive 的三个属性

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

两个生命周期函数

keep-alive的使用会触发两个生命周期函数：

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

组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了

所以其提供了actived 和deactived钩子，帮我们实现业务需求。

activated () {
	console.log('activated 激活，进入页面')
},
deactivated () {
	console.log('deactivated 失活，进入页面')
}

VueCli 自定义创建项目

需要安装脚手架
创建项目（这里的项目名称是test11-cli）

1	vue create test11-cli

选择创建模式，选自定义Manually select features

选择功能，这里Babel用于es6转译es3，Router为路由，CSS Pre-processors用于使用less、scss，Linter/Formatter为eslint校验代码格式

选择Vue版本，这里我选择Vue2.x

是否使用history模式，我这里选择否，使用hash模式

选择CSS预处理

选择eslint风格，这里选择标准风格

选择校验的时机，选择正常开启，保存校验

选择配置文件的生成方式，选择把配置文件生成到单独的文件当中，便于维护

选择是否保留预设

选择使用Yarn还是NPM

等待安装，项目初始化完成

ESlint 代码规范

代码有书写规格，需要遵循指定的约定规则

JavaScript Standard Style 规范说明：https://standardjs.com/rules-zhcn.html

下面是这份规则中的一小部分：

字符串使用单引号 – 需要转义的地方除外
语句结尾无分号
关键字后加空格 if (condition) { ... }
函数名后加空格 function name (arg) { ... }
坚持使用全等 === ，摒弃 ==

Vue-路由