【无标题】Vue2路由的使用 vue-router
路由
1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
2. 前端路由：key 是路径，value 是组件。
一、基本使用
1. 安装 vue-router，命令：`npm i vue-router` （注意：vue2中，必须使用 vue-router3）
2. 应用插件：`Vue.use(VueRouter)`
3. 编写 router 配置项（在JS文件中配置）:
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
routes: [
{
path: '/about',
component: About,
},
{
path: '/home',
component: Home,
},
],
})
//暴露router
export default router4. 实现切换（active-class 可配置高亮样式）
在组件的vue文件中使用：
About 5. 指定展示位置
在组件的vue文件中使用：
二、几个注意点
1. 路由组件通常存放在`pages`文件夹，一般组件通常存放在`components`文件夹。
2. 通过切换，“隐藏”了的路由组件，默认 是被 销毁 掉的，需要的时候再去挂载。
3. 每个组件都有自己的`$route`属性，里面存储着自己的路由信息。
4. 整个应用只有一个 router，可以通过组件的`$router`属性获取到。
三、多级路由（多级路由）
1. 配置路由规则，使用 children 配置项：
路由的配置文件index.js中配置：
routes: [
{
path: '/about',
component: About,
},
{
path: '/home',
component: Home,
children: [
//通过children配置子级路由
{
path: 'news', //此处一定不要写：'/news'
component: News,
},
{
path: 'message', //此处一定不要写：'/message'
component: Message,
},
],
},
]
2. 跳转（要写完整路径）：
在组件的vue文件中使用：
News 3.多级路由的完整配置文件（包括路由前置、后置守卫等的使用）：
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import homeNews from '../pages/homeNews'
import homeMessage from '../pages/homeMessage'
import Detail from '../pages/Detail'
// 创建并暴露一个路由器 , 配置项中 meta是程序员自定义的内容
const router = new VueRouter({
routes: [
{
name: 'guanyu',
path: '/about',
component: About,
meta: { title: '关于', isAuth: true }
},
{
name: 'zhuye',
path: '/home',
component: Home,
meta: { title: "主页" },
children: [
{
name: 'xiaoxi',
path: 'message', // 子路由 path 不加 '/'
component: homeMessage,
meta: { isAuth: true, title: "消息" },
children: [
{
name: 'xiangqing',
path: 'detail',
component: Detail,
meta: { title: "详情" },
// props 的第一种写法： 值为对象，该对象中的所有 key-value 都会以props形式传给detail组件
// props: { a: 1, b: 2 }
// props 的第二种写法： 值为Boolean，若为true就把该路由组件收到的所有params参数以props形式传给detail组件
// props: true
// props 的第三种写法： 值为函数(返回值必须是对象)，该函数返回的对象中每一组key-value都会通过props传给Detail组件
/*props: function ($route) {
return { id: $route.query.id, title: $route.query.title }
}*/
props({ query }) {
return { id: query.id, title: query.title }
}
}
]
},
{
name: 'xinwen',
path: 'news',
component: homeNews,
meta: { isAuth: true, title: "新闻" },
// 独享路由守卫
/*beforeEnter: (to, from, next) => {
console.log('独享路由守卫', to, from);
if (to.meta.isAuth === true) {
if (localStorage.getItem('school') === '尚硅谷') {
next();
} else {
alert('学校名错误，无权限查看！');
}
} else {
next()
}
}*/
}
]
},
]
})
// 全局前置路由守卫（3个参数，to from next） —— 初始化的时候、每次路由切换之前被调用
/*router.beforeEach((to, from, next) => {
console.log('前置路由守卫', to, from);
if (to.meta.isAuth === true) {
if (localStorage.getItem('school') === '尚硅谷') {
next();
} else {
alert('学校名错误，无权限查看！');
}
} else {
next()
}
})*/
// 全局后置路由守卫（2个参数，to from） —— 初始化的时候、每次路由切换之后被调用
router.afterEach((to, from) => {
document.title = to.meta.title || "西邮系统";
console.log('后置路由守卫', to, from);
})
export default router;四、路由的 query 参数
1. 传递参数
跳转
跳转 2. 接收参数：
在路由的配置文件index.js中使用：
$route.query.id
$route.query.title
五、命名路由
1. 作用：可以简化路由的跳转。
2. 如何使用
（1） 给路由命名：
在路由的配置文件index.js中使用：
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //给路由命名
path:'welcome',
component:Hello,
}
]
}
]
}（2） 简化跳转：
在组件的vue文件中使用：
跳转
跳转
跳转 六、路由的 params 参数
1. 配置路由，声明接收 params 参数
在路由的配置文件 index.js 中书写：
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail
}
]
}
]
}2. 传递参数
在组件的vue文件中使用：
跳转
跳转 特别注意：路由携带 params 参数时，若使用 to 的对象写法，则不能使用 path 配置项，必须使用 name 配置！
3. 接收参数：
$route.params.id
$route.params.title
七、路由的 props 配置
作用：让路由组件更方便的收到参数
在路由的配置文件 index.js 文件中书写：
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
// props:{a:900}
//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
// props:true
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
// props({query:{id, title}}) {
// return {id: id, title: tile}
// }
props(route){
return {
id:route.query.id,
title:route.query.title
}
}
}八、``的 replace 属性
1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为`push`和`replace`，`push`是追加历史记录，`replace`是替换当前记录。路由跳转时候默认为`push`
3. 如何开启`replace`模式：`
九、编程式路由导航
1. 作用：不借助`
2. 具体编码：
在路由的配置文件 index.js 中书写：
//$router的两个API
this.$router.push({
name: 'xiangqing',
params: {
id: xxx,
title: xxx,
},
})
this.$router.replace({
name: 'xiangqing',
params: {
id: xxx,
title: xxx,
},
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退十、缓存路由组件
1. 作用：让不展示的路由组件保持挂载，不被销毁。
2. 具体编码：
在组件vue文件中书写：
// News 是组件名，表示 缓存组件News，:include="['news', 'message']
// 以下表示：同时缓存两个组件
十一、两个新的生命周期钩子activated 、 deactivated
1. 作用：路由组件所独有 的两个钩子，用于捕获路由组件的激活状态。
2. 具体名字：
（1）`activated`路由组件被激活时触发。
（2）`deactivated`路由组件失活时触发。
十二、路由守卫
1. 作用：对路由进行权限控制
2. 分类：全局守卫、独享守卫、组件内守卫
3. 全局守卫:
//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to, from, next) => {
console.log('beforeEach', to, from)
if (to.meta.isAuth) {
//判断当前路由是否需要进行权限控制
if (localStorage.getItem('school') === 'atguigu') {
//权限控制的具体规则
next() //放行
} else {
alert('暂无权限查看')
// next({name:'guanyu'})
}
} else {
next() //放行
}
})
//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to, from) => {
console.log('afterEach', to, from)
if (to.meta.title) {
document.title = to.meta.title //修改网页的title
} else {
document.title = 'vue_test'
}
})4. 独享守卫:
beforeEnter(to,from,next){
console.log('beforeEnter',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('school') === 'atguigu'){
next()
}else{
alert('暂无权限查看')
// next({name:'guanyu'})
}
}else{
next()
}
}5. 组件内守卫：
我是about的内容
十三、路由器的两种工作模式
1. 对于一个 url 来说，什么是 hash 值？—— #及其后面的内容就是 hash 值。
2. hash 值不会包含在 HTTP 请求中，即：hash 值不会带给服务器。
3. hash 模式：
(1)地址中永远带着#号，不美观 。
(2)若以后将地址通过第三方手机 app 分享，若 app 校验严格，则地址会被标记为不合法。
(3)兼容性较好。
4. history 模式：
(1) 地址干净，美观 。
(2) 兼容性和 hash 模式相比略差。
(3) 应用部署上线时需要后端人员支持，解决刷新页面服务端 404 的问题。
connect-history-api-fallback ，用来解决 history 之后 404 NOT FOUND 的问题
npm i connect-history-api-fallback