vue-router
目录
1. 概念
1.1 vue-router的概念
1.2 SPA的概念
2. 基本使用
2.1 搭配环境和使用
2.2 注意点
2.3 多级路由（多级路由）
2.4 路由query 传参
2.5 命名路由
2.6 路由的params传参
2.6 路由的props配置
2.7 的replace属性
2.8 编程式路由导航
2.9 缓存路由组件
2.10 生命周期的钩子 activated和deactivated
3. 路由守卫
3.1 全局守卫
3.1.1 全局前置守卫
3.1.1 全局后置守卫
3.2 独享守卫
3.3 组件内守卫
4. 路由器的两种工作模式
4.1 history 模式
4.2 hash模式
1. 概念
1.1 vue-router的概念
- vue-router: vue 的一个插件库，专门用来实现 SPA 应用
- 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
- 前端路由：key是路径，value是组件。
1.2 SPA的概念
- 单页 Web 应用（single page web application，SPA）
- 整个应用只有一个完整的页面
- 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
- 数据需要通过 ajax 请求获取。
2. 基本使用
2.1 搭配环境和使用
1. 安装vue-router命令：npm i vue-router
注意vue-router4只能在vue3使用， vue-router3只能在vue2使用
2. src创建index.js文件编写router配置项:
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
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 router3. 实现切换（active-class可配置高亮样式）
About 4. 指定展示位置
2.2 注意点
组件分为路由组件（无需跳转）和一般组件（写标签）
-
路由组件放在pages文件夹，一般组件放在components文件夹。
-
通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
-
每个组件都有自己的 $route属性，里面存储着自己的路由信息
-
整个应用只有一个router，可以通过组件的 $router 属性获取到。
2.3 多级路由（多级路由）
1.配置路由规则，使用children配置项：
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写：/news
component:News
},
{
path:'message',//此处一定不要写：/message
component:Message
}
]
}
]2. 跳转（要写完整路径）：
News - 配置多级路由的path 一定不要写/, 父路由需要写/，子路由不用写！
- 跳转的路径要带父组件的路径
2.4 路由query 传参
1. 传递参数
跳转
跳转 建议使用对象写法
2.5 命名路由
作用：可以简化路由的跳转。
1. 路由命名
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //给路由命名
path:'welcome',
component:Hello,
}
]
}
]
}2. 简单跳转
跳转
跳转
跳转 写了路由名字，可以用name代替to的路径
2.6 路由的params传参
这种方式要用name的方式写url
1.配置路由，声明接收params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail
}
]
}
]
}2. 传递参数
跳转
跳转 特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
3. 接收参数：
$route.params.id
$route.params.title
2.6 路由的props配置
作用：让路由组件更方便的收到参数
{
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(route){
return {
id:route.query.id,
title:route.query.title
}
}
}2.7 的replace属性
- 作用：控制路由跳转时操作浏览器历史记录的模式
- 浏览器的历史记录有两种写入方式：分别为push和replace
- push是追加历史记录，路由跳转时候默认为push
- replace是替换当前记录
- 开启replace模式：
News
2.8 编程式路由导航
作用：不借助
//$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. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
- 2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
- 3. this.$router.back(): 请求(返回)上一个记录路由
- 4. this.$router.go(-1): 请求(返回)上一个记录路由
- 5. this.$router.go(1): 请求下一个记录路由
2.9 缓存路由组件
作用：让不展示的路由组件保持挂载，不被销毁。
include里面写组件名！组件名！
数组形式表示，逗号做分割符可以写多个组件
2.10 生命周期的钩子 activated和deactivated
作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
这两个生命周期钩子是路由独有的，要配合keep-alive标签使用
activated路由组件被激活时触发。deactivated路由组件失活时触发。
nextTick 也是一个生命周期钩子：在下一次dom更新完再执行回调
3. 路由守卫
作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫
3.1 全局守卫
3.1.1 全局前置守卫
全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach（(to,from,next)=>{}）
- to：到哪里去
- from：从哪里来
- next：设置权限
- meta：路由元信息，程序员可以自定义的信息
- meta: {name:true}, 可以设置谁需要配置权限管理
//全局前置守卫：初始化时执行、每次路由切换前执行
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() //放行
}
})
3.1.1 全局后置守卫
全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach（(to,from)=>{}）
//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
console.log('afterEach',to,from)
if(to.meta.title){
document.title = to.meta.title //修改网页的title
}else{
document.title = 'vue_test'
}
})3.2 独享守卫
单独对谁进行的守卫
beforeEnter :(to,from,next)=>{}
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()
}
}3.3 组件内守卫
就是在组件内部进行守卫
beforeRouteEnter (to, from, next) {}
beforeRouteLeave (to, from, next) {}
//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}如果全局守卫和独享守卫同时存在，想用全局守卫，后用独享守卫
4. 路由器的两种工作模式
hash值：#及其后面的内容
hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
4.1 history 模式
-
地址干净，美观 。
-
兼容性和hash模式相比略差。
-
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
4.2 hash模式
-
地址中永远带着#号，不美观 。
-
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
-
兼容性较好。
4.3 补充
项目写完了用 npm run build命令 ，打包生成list文件夹
打包处理的要经过服务器部署 node express
新建一个文件夹
npm init （xxx）
npm i express
新建server.js:
const express=require('express')
const app=express()
//端口监听（设置端口号）
app.listen(5000) node server
static/public: 放静态资源，html、css、js
然后再把list文件放到static文件夹里