本文已参与[新人创作礼]活动，一起开启掘金创作之路
一.概念
1.是什么
Vue 中的路由就是路径和组件的映射关系
2.为什么
(1)SPA
全称：Single Page Application，单一的页面应用程序
优点
所有的业务功能都在一个页面上实现, 整个网页不会刷新, 用户体验极佳
数据传递容易，开发效率高
缺点
首次加载较慢，不利于seo
(2)因为现在开发都是 SPA, 而 SPA 想实现页面切换就需要依赖路由来切换组件
二.基本使用
1.下包
yarn add vue-router
2.引入到 main.js
import VueRouter from 'vue-router'
3.全局引入(vue使用插件需要在main.js声明)
Vue.use(VueRouter)
会帮我们注册两个全局组件
router-link: 会默认解析成 a 标签，可以通过 tag 属性指定它解析成什么标签
router-view：路由出口，路由匹配到的组件渲染处
4. 创建路由规则数组
router/index.js
const routes = [
// 一个对象就是一个路由规则
{
path: ' 路径 ' ， 全小写
name: '路由名',
component ： 组件，指定组件对象
redirect: 重定向路径,
children: [{
path: '路径',
name: '路由名',//query专用
component: () => import('相对路径'),
//meta: { title: '标题', icon: '图标' }
}]
}
]
5. 根据规则创建路由对象
router/index.js
const router = new VueRouter({
routes 指定路由规则
})
6. 将路由对象挂到 Vue 实例上
main.js
new Vue({
...
router
})
7. 设置一个挂载点
.vue
找到要切换组件的地方, 加一个 <router-view></router-view> 占位符
三.声明式导航
1.a 标签
如果要进行路由导航条转, 也可以使用 a 标签, 但比较麻烦. 每次都需要加 #
<a href="#/my">我的</a>
2.router-link
实现的效果是通过一个 a标签进行跳转， router-view是对路由相对应的页面进行渲染
<router-link to="路径">首页</router-link>
优点
自动添加
自动添加类名, 便于实现高亮
router-link-active 模糊匹配:主要使用,有这个地址就行
router-link-exact-active 精确匹配:必须是这个地址
传参
分为两种，name-params，path-query
<router-link :to="{ name:'路由名'/path:'路径',params: { paramsId: xxx}/query:
{ queryId: xxx}}" >
接收参数
query 传参，在.vue中使用$route.query获取
params传参，在.vue中使用$route.params获取
两者区别
params 传参配置的是name，在 params中配置 path 无效
query 在路由配置不需要设置参数，而 params 必须设置
query 传递的参数会显示在地址栏中
params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;
四.编程式导航
1.实现原理
使用 js 代码实现路由跳转
2.用法
this.$router.push({
path: '',
name: '' // 需要提前配置
})
3.传参
推荐两种搭配：path + query，name + params
path + query
this.$router.push({
path: '',
query: {
参数名: 参数值
}
})
name + params
this.$router.push({
name: '', // 需要提前配置
params: {
参数名: 参数值
}
})
更为隐藏，页面刷新后参数会丢失
4.接收和声明式相同 $router.params/query
五.路由模式
1. hash：
使用 URL 的hash来模拟一个完整的 URL, 其显示的网络路径中会有 "#" 号
hash 虽然出现在URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改
变hash后刷新, 也不会有问题
原理
hashChange（原生事件），主要是通过事件监听hash值得变化
<a href='#/aaa'>1</a>
window.onHashChange=function(){}
2. abstract：
支持所有`JS`运行环境，如`Node.js`服务器端，如果发现没有浏览器的`API`，路由会自动强制进
入此模式
3. history：
实际工作中常用
美化后的hash模式，路径中不包含"#"。依赖于Html5 的 history api
由于改变了地址, 刷新时会按照修改后的地址请求后端, 需要后端配置处理, 将地址访问做映射, 否则会404
4. 路由模式的切换：
router/index.js
// 创建路由实例
const createRouter = () => new Router({
mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
// 指定路由规则
routes: [
...constantRoutes // 静态路由
]
})
配置好之后，我们访问路径不再需要加"#"号同样运行正常，这是因为 webpack 默认配好了对于 history 模式的处理
