vue中的路由

1.路由（route）的简介

1.路由就是一组key-value的对应关系
2.多个路由，需要经过路由器的管理
路由是为了实现SPA(single page web application）应用，即单页面应用

编程中的路由是为了实现导航区和展示区来来回回的切换

2.vue-router是啥？

vue的一个插件库，专门用来实现SPA应用

3.什么是SPA应用？

1.单页Web应用（single page web application，SPA）
2.整个应用只有一个完整的页面
3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新
4.数据需要通过ajax请求获取

4.路由基本使用

安装3版本的vue-router

npm i vue-router@3

//引入VueRouter
import VueRouter from 'vue-router'
//应用插件
Vue.use(VueRouter)

引入VueRouter之后，我们就可以再vm中引入一个新的配置项router

---

新建一个文件夹router，里面有一个index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../components/About'
import Home from '../components/Home'
//创建并暴露一个路由器
export default new VueRouter({
routers:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})

在main.js中引入路由器

import router from './router'

路由的使用

<router-link class="list-group-item" active-class="active" to="/about">About</router-link>

路由的显示

//指定组件的呈现位置
<router-view></router-view>

一般pages文件夹中存放路由组件，components里面存放一般组件

5.嵌套路由

也叫多级路由，体现在路径上面

{
path:'/home',
component:Home,
children:[
{
path:'/news',
component:News,
}
]

}

6.路由传参

在router-link中把id和title传输过去
1.跳转路由并携带query参数，to的字符串写法

<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> 

2.跳转路由并携带query参数，to的对象写法

<router-link :to="{
path:'./home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>

query用来接收传递过来的参数

7.路由守卫

其实这是一个权限的问题
在暴露路由之前写一个路由守卫

const router =new VueRouter({})
//全局前置路由守卫--初始化的时候被调用，每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
if(to.path==='/home/news' || to.path==='/home/message'){
if(localStorage.getItem('school'==='atguigu'){
next()
}else{
alert('学校名不对，无权限查看')
}
}else{
next()
}
})
export default router

8.history模式于hash模式

1.默认是hash模式
hash值据说#及其后面的内容就是hash值

hash值最大的特点就是它不会随着http请求发给服务器
即不会作为路径的一部分发给服务器
2.history模式，默认是hash模式，如果想更改，需要借助以下配置项
mode:‘history’
3.区别
hash模式：
1.地址中永远带着#号，不美观
2.如果以后地址通过第三方手机App分享，若app校验严格，则地址会被标记为不合法
3.兼容性较好
history模式：
1.地址干净，美观
2.兼容性和hash模式相比略差
3.应用部署上线需要后端人员支持，解决刷新页面服务端404的问题