Vue2——单页应用程序路由的使用
一.单页应用程序与多页应用程序之间的比较
二.单页的应用场景
系统类网站 / 内部网站 / 文档类网站 / 移动端网站
三.路由的介绍
1. 什么是路由
路由是一种映射关系
2. Vue中的路由是什么
路径和组件的映射关系
四.VueRouter的使用
5个基础步骤（固定）
1. 下载：下载VueRouter模块到当前工程，版本3.6.5
yarn/vue add vue-router@3.6.5 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
}).$mount('#app')2个核心步骤
1. 创建需要的组件（views目录），配置路由规则
2. 配置导航，配置路由出口（路径匹配的组件显示的位置）
五. 组件存放目录问题（组件分类）
分类开来 更易维护
·src / views文件夹
·页面组件 - 页面展示 - 配合路由用
·src / components文件夹
·复用组件 - 展示数据 - 常用于复用
六. 路由模块封装
·路由模块的封装抽离的好处是什么
拆分模块，利于维护
以后如何快速引入组件
基于@指代src目录，从src目录出发找组件
七. 使用router-link替代a标签实现高亮
vue-router提供了一个全局组件router-link（取代a标签）
1. 能跳转，配置to属性指定路径（必须）。本质还是a标签，to无需#
2. 能高亮，默认就会提供高亮类名，可以直接设置高亮样式
·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. 查询参数传参
1. 语法格式
·to='/path?参数名=值'
2. 对应页面组件接收传递过来的值
·$router.query.参数名
目标：在跳转路由时，进行传值
2. 动态路由传参
1. 配置动态路由
const router = new VueRouter({routes: [...,{path: '/search/:words',component: Search}]
})2. 配置导航链接
·to="/path/参数值"
3. 对应页面组件接收传递过来的值
·$route.params.参数名
动态路由参数可选符
问题：配了路由path:"/search/:words"为什么按下面步骤操作，会未匹配到组件，显示空白
原因：/search/:words表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"?"
const router = new VueRouter({routes: [{path: '/', redirect: '/home'},{path: '/home', component: Home},{path: '/search/:words?', component: Search}]
})编程式导航-基本跳转
两种语法：
1. path路径跳转（简易方便）
this.$router.push('路由路径')this.$router.push({path: '路由路径'
})2. name命名路由跳转（适合path路径长的场景）
this.$router.push({name: '路由名'
}){name: '路由名', path: '/path/xxx', component: xxx},编程式导航-路由传参
两种传参方式：查询参数+动态路由传参
1.1 path路径跳转传参（query传参）
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
this.$router.push({path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'}
})1.2 path路径跳转传参（动态路由传参）
this.$router.push('/路径/参数值')
this.$router.push({path: '/路径/参数值'
})2.1 name命名路由跳转传参（query传参）
this.$router.push({name: '路由名字',query: {参数名2: '参数值1',参数名2: '参数值2'}
})