1.安装vue开发者工具 即可消除
2.提示我们正在使用一个开发者的vue版本 开发者版本比较大(有报错提示功能) 在生成环境中最好替换为生产版本
添加 Vue.config.productionTip = false 即可消除
默认会传event事件参数 @click="showInfo"和@click="showInfo(event)"相等的
可以直接传参@click=“showInfo(66)” 同时也可以带上事件参数@click=“showInfo($event,66)”
标签中属性加 v-bind: 进行属性动态绑定 age的值 是双引号里面运行的
表达式的值
而不是字符串不加 v-bind: age的值 是双引号里面的
字符串
上面age值的是 数值19
下面是 字符串 18+1
vue3中只支持函数式
箭头函数中this指代是window
prevent
stop
添加后点击
标签 不再触发两次showInfo事件 只执行里面的事件
once
添加后点击
标签 只触发一次 再点击无反应
capture
在div1中添加capture后 点击 标签 先执行div1的事件 再执行div2的事件
事件捕获 顺序:由外到内 div1 --> div2
事件冒泡 顺序:由内到外 div2 --> div1
嵌套的div执行顺序为:先事件捕获后事件冒泡
由于正常事件 在冒泡阶段触发 所以正常先执行div2 再div1 结果为 2 1
在div1中添加capture后 点击 标签 在捕获阶段中就执行div1的事件 再执行div2的事件 结果为1 2
在按下指定按键后才触发事件反应
自定义按键(vue3被禁止)
按下回车键才触发showInfo事件 keyup 按键抬起后触发
e.key 按键名称 enter control(ctrl)
e.keyCode 按键编码 13 17
监听属性(data中的 computed计算属性中的)发生变化时调用监听函数中的handler回调函数
1.可以添加参数 newValue oldValue 2.添加配置 immediate:ture 初始化时就调用
deep 开启深度监视:监视data属性中某一个属性的子属性是否变化
只监听某一个子属性用 ‘属性名.子属性名’ 方式
监听任意子属性变化用deep:true
watch可以执行异步操作例如 延时1s执行某个函数 computed做不到 是同步的
v-if 切换频率低时使用 控制DOM是否有节点 false时不渲染
v-show 切换频率高时使用 控制DOM的style:"display:none"的值 任何情况必渲染
template 只能搭配v-if 使用 v-show不行
v-for遍历时 看情况要添加唯一的key值 如不添加vue默认添加 ;key=“index”
key值为index时 在操作遍历列表数据时可能出现 界面错乱 遍历效率低情况 如果数据仅展示可不添加
key值应为唯一值 如id 身份证号 学号等
必须使用 push pop shift unshift splice sort reverse 方法
或者 Vue.set(对象,属性名,值 vm.$set(对象,属性名,值)
直接使用索引修改的话 Vue不会做响应式处理 (页面不会渲染)
操作会影响原数组的:
push 末尾添加 splice 替换元素 splice(0,1,“喝酒”) (开始索引,替换元素个数,替换元素)
pop 末尾删除 sort 排序
shift 首位删除 reverse 翻转
unshift 首位添加
不会影响原数组(返回新数组):
filter 过滤
.filter 数组过滤: return 需要满足的条件 返回一个新的数组
indexOf: 是否包含指定字符串 不包含返回-1 包含返回所在索引值 空字符串返回 0
.unshift: 在数组最前面添加元素
.push: 在数组后面添加元素
Math.floor: 向下取整
Math.random(): 生成随机数 [0,1)
.sort: 数组排序 a.b 为数组中两个元素进行比较
a-b: 升序
b-a: 降序
Vue对象中后添加的属性默认不做响应式处理 (添加数据后数据更新 页面不刷新)
使用: Vue.set(对象,属性名,值) this.$set(对象,属性名,值)
这样后添加的属性具有响应式(getter 和 setter)
修改
对象的已有属性
可以直接修改 (先添加的属性Vue已经进行了响应式处理)
.reduce( (pre,current)=>{ } , )
可以用来统计数组中做了某事的数量 货币大于100的数量等
下面的用来统计 todos 数组中 done值为true的对象的数量
第一个参数 条件函数 第二个参数 统计初始值
(pre,current)=>{ } 这个函数调用的次数为数组的长度
pre 上一次调用的返回值
current 当前值 数组的当前元素值
radio 单选框的 一定要添加value值
checkbox 复选框的 添加value值 对应的属性为数组 (添加checked 默认选择项)
v-mode绑定的值不能是props传的值 因为props是不可以修改的
使用时 通过管道符号 | 加过滤器名 即可调用(可以同时执行多个过滤器)
调用时会自动将time 值 传入(默认)
过滤器传参可以有两个参数 第一个默认为前面的time值 (调用时可以不写)
第二个为主动传值 如果调用时没有传第二个值 第二个值默认为str的值
过滤器会生成新的数据 不会改变原数据
要用新的对象接收
定义一个名为 mySlice 的全局过滤器
setInterval(()=>{ 操作 },1000) 设置定时器 操作及时间间隔
clearInterval(定时器名) 销毁定时器
使用Vue.extend({ })
创建组件
里面通过templatel来编写html结构 只能有一个根节点(用一个div包裹全部html)
数据部分用date函数式编写 data(){ } (防止数据连带)
可以简写 省略 Vue.extend({ }) (在Vue脚手架中)
在Vue实例中用components:{ }
注册组件
(局部注册)1.Vue实例中的组件名:引入组件名
2.直接使用相同组件名
Vue.component(‘实例中组件名’,引入组件名)
全局组件注册
全局组件可以在不同Vue实例中使用 (不用在不同Vue实例中再去分别注册)
直接用组件名做标签
使用组件
(局部组件,全局组件同理)
Vue实例中的组件名等于引用组件名 可以直接写
一个单词 首字母小写school
Vue开发者工具中显示为首字母大写
一个单词 首字母大写School
Vue开发者工具中显示为首字母大写
多个单词用 - 分隔 my-school 同时必须用 ‘’ 标记
多个单词 首字母全大写 必须在脚手架中才可用使用
在注册组件是使用name 命名组件名 在Vue开发者工具中显示对于的name名
1.school.vue 1.my-school.vue
2.School.vue (推荐) 2.MySchool.vue (推荐)
export default { } 暴露组件
name 和文件名一致
render: h => h(App) 只在main.js 文件中调用一次
完整版:核心功能+模板解析器 (文件大)
精简版:核心功能 (文件小)
因为在main.js中引入的是’vue’ 这个’vue’ 是精简版的 解析不了App模板
所以要调用render函数 去进行模板解析
render函数调用createElement函数 createElement可以直接解析html结构
在项目目录下新建 vue.config.js 文件 添加如下代码
想要修改项目入口 修改entry 地址
查看脚手架默认配置指令 vue inspect > output.js 会生成一个output.js文件
个性化配置详情 https://cli.vuejs.org/zh/config/#pages
父子组件 父传子 传递数据时想传 数值 对象 方法 可以使用v-bind: 属性绑定 这样传递的值是 表达式的值
props比data执行优先级高 先执行props后执行data 所以有同名属性时显示的是props的属性值
v-mode绑定的值不能是props传的值 因为props是不可以修改的
所有props的属性都会成为component对象的属性, 模板页面可以直接引用
父子组件 子传父
this.$on('delete_todo', function (todo) {
this.deleteTodo(todo)
})
events: {
'delete_todo': function (todo) {
this.deleteTodo(todo)
}
},
@delete_todo="deleteTodo"
this.$emit(eventName, data): 在当前组件触发事件
this.$dispatch(eventName, data): 分给父辈组件(冒泡)
this.$broadcast(eventName, data): 广播给后代组件
父组件中在子组件标签上添加 自定义事件 @自定义事件名=“回调函数名”
并配置回调方法(可传参一个或多个)
父组件中在子组件标签上添加 ref属性 ref=“标签属性名” 获取ref所在组件实例 通过dom操作实现
并配置回调方法(可传参一个或多个)
在生命周期函数中 通过 this. r e f . s t u d e n t . ref.student. ref.student.on(‘自定义事件名’,this.回调函数名)
可通过设置 定时器搭配 箭头函数实现延时功能
通过箭头函数直接将 getStudentName 函数实现
this 指向当前组件vc data中的studentName 属性
在子组件中通过 this.$emit(‘自定义事件名’) 调用回调函数demo 并传值
this 为当前组件实例对象vc
父组件中回调函数传多个参数 name为第一个参数 …params 为剩余参数(以数组方式接收)
子组件中通过 , 分隔各个参数
在父组件中的子组件标签上 通过 原生事件.native 可以实现对子组件的事件添加
这么写相当于在子组件的 根标签 上添加show事件函数
适用于任意组件之间的通信 如 兄弟组件 孙子组件 父子子父组件一般使用props和emit更方便
在main.js中的new Vue 中添加beforeCreat生命周期函数并配置bus 全局事件总线
接收数据组件中 在生命周期函数中(最好在mounted中实现)
通过 this. b u s . bus. bus.on(‘回调函数名’,this.方法名) 配置回调事件
或者 使用箭头函数 this. b u s . bus. bus.on(‘回调函数名’,(参数)=>{ })
在 接收数据组件中 最好添加beforeDestroy生命周期函数 通过 this. b u s . bus. bus.off(‘回调函数名’) 解绑 组件通信
发送数据组件中 通过 this. b u s . bus. bus.emit(‘回调函数名’,参数) 将数据发送给接收组件触发回调函数
把多个组件共用的配置提取为一个混入对象 在使用时引入
mixin.js中可以写任何vm配置 如 data methods mounted
mixin.js和组件中共有的属性配置优先级:
data中的优先显示
生命周期函数中 全部执行 互不干扰 混入中的先执行
配置一个mixin.js文件 混入文件 位置和main.js平级
以对象的形式对外
分别暴露
局部引入:
在对应的组件中 通过 import{ } from ’ ’ 引入混入
添加mixins:[ ] ;里面添加对应混入对象名
全局引入
在main.js中 通过 import{ } from ’ ’ 引入混入
Vue.mixin( ) 里面添加对应混入对象名
这样vm 和 vc(VueComponent的实例对象)都会引入混入配置
在main.js 中 通过 import 插件名 from ‘路径’ 引入插件
通过 Vue.use(插件名) 应用插件
既可以使用插件中的各种功能 (类似第三方库)
让样式在局部使用 防止多个同名样式冲突
多个同名样式 会以在App.vue 文件中 后引入import的样式为准
uuid的精简版
在控制台 输入 npm i nanoid 进行安装
使用 import{nanoid} from ‘nanoid’ 引入
直接调用函数 nanoid() 即可生成唯一id
存对象时 使用 JSON.stringfy( ) 将对象转化成字符串
获取时使用 JSON.parse( )
对象.hasOwnProperty(‘属性名’) 返回true或者false
Vue中一个回调函数中 先遍历一遍代码 然后对比dom看看修改了哪些地方 然后才去解析模板 更新dom
nextTick()函数 就是 先遍历一遍代码 然后发现nextTick函数 不执行nextTick函数 在对比完dom并更新完dom渲染完模板后 再去调用nextTick函数
修改isEdit为true后 会显示input输入框节点出现 直接写this.$refs.inputTitle.focus()的话 不会奏效
因为 vue是 执行一遍全部代码后才更新dom 渲染模板 执行完 todo.idEdit后输入框input节点还没出现 下面的获取不到节点操作不了
使用nextTick() 就是在handleEdit函数执行完 再执行nextTick函数 此时就有input输入框的节点了
通过添加定时器也可以实现这功能 但不推荐
安装 npm i axios
引入 import axios from ‘axios’
response 和 error 都是对象
使用axios时会面临服务器跨域问题 1.后端解决 2.前端解决
前端 使用代理服务器 在vue.config,js 里面配置代理服务器实现反向代理解决跨域问题
配置的代理服务器端口号默认和发出请求的服务器一样8080
原理 前端服务器8080通过axios向5000发送请求(红色服务器)首先查看8080自身public静态资源里有没有对应信息 没有 向8080代理服务器发送请求(粉色) 代理服务器 再向5000发请求 5000将信息发送给代理服务器
上面的简易配置缺点 只能定向 向一个服务器发请求5000 每次请求会先查看自身public下是否有对应资源
有的话就直接返回资源 不去访问5000服务器了 所以使用下面的配置
ws:true 和 changeOrigin:true 在Vue中默认都是true React中默认是false
changeOrigin:true 时5000服务器收到的请求url显示的是localhost:5000(假冒自家服务器才能获得资源)
代理服务器 的端口号host 是和前端服务器一致的 所以发送请求时 url 访问8080
路径中 atguigu/students 代表 通过代理服务器去访问另一台 5000端口号的服务器的students资源
配置中通过 pathRewrite 将url中的atguigu 通过正则表达式去掉了
如果url为 http://localhost:8080/students 不加前缀 那么就不执行代理服务器 先访问自己服务器的
pubic文件下是否有 students资源 有直接显示 没有就不显示(实现自由控制是否访问自身的public资源)
将bootstrap.css 放到public下的css文件夹中
在index.html中通过 link引入
…对象 就是原封不动的将对象展开并放入
对象={对象1,对象2} 对象1和对象2中的属性对比 1中有2没有的不变 1,2都有1被替换成2
…this.info 的全部数据和…dataObj 的全部数据对比 同名的替换 没有的不更改(按照属性名对比)
如果直接进行赋值 this.info=dataObj 那么 dataObj 是直接替换info对象
dataObj中没传的值 info中就不再显示了 如dataObj只传 errMsg 属性 那么info中只剩errMsg一个属性了
在video标签加 controls 就会出现进度条播放按钮
在使用组件时可以个性化改变组件结构 添加新的结构
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件 。
分类:默认插槽、具名插槽、作用域插槽
默认插槽:组件中添加slot标签 在使用组件时 在标签体添加的结构会默认添加到slot插槽处 组件中写多个slot 就会插入多次新结构
父组件中:
html结构1
子组件中:
插槽默认内容...
具名插槽:slot标签添加 name属性 使用组件时在标签中使用slot=“name属性值” 指定添加到的插槽位置
使用template标签时可以使用 v-slot:name属性值 形式
父组件中:
html结构1
html结构2
html结构3
html结构4
子组件中:
插槽默认内容...
插槽默认内容...
作用域插槽:数据在组件的自身不在使用者身上,使用组件想调用组件中的数据时使用作用域插槽,具体数据生成的结构还是组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定 将数据v-for遍历成 无序结构ul 还是有序结构ol h4标签结构等)
template标签上的scope属性的名scopeData随意 不做规定
组件要将组件中的数据绑定到插槽slot结构中 这样在使用时才可以通过scope来接收到数据
作用域插槽可以搭配具名插槽使用 slot标签添加 name属性
父组件中:
- {{g}}
{{g}}
子组件中:
多个组件之间公共的数据 方法 集合地,组件中可以直接调用Vuex中的数据state 和方法actions 和mutations 并可以通过vue开发工具具体查看操作流程
整个vuex作为一个对象 store 组件中调用时 $store.state $store.despatch $store.commit
安装store npm i vuex 默认安装的是vuex4 对应版本vue3
npm i vuex@3 指定安装vuex3 对应版本vue2
新建src/store/index.js 配置store环境
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
在
main.js
中引入store 创建vm时传入store
配置项
//引入store
import store from './store'
......
//创建vm
new Vue({
el:'#app',
render: h => h(App),
store
})
在index.js配置actions 和 mutations 的方法 (mutations 同名方法一般取actions 的方法名大写)
在组件中修改Vuex中actions 的方法
$store.dispatch('action中的方法名',数据)
如果不在actions 中做任何操作 可以直接调用 mutations 中的方法
$store.commit('mutations中的方法名',数据)
在actions 中的方法中操作完调用mutations 中的方法
context.commit('mutations中的方法名,value)
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)
const actions = {
//响应组件中加的动作
jia(context,value){
// console.log('actions中的jia被调用了',miniStore,value)
context.commit('JIA',value)
},
}
const mutations = {
//执行加
JIA(state,value){
// console.log('mutations中的JIA被调用了',state,value)
state.sum += value
}
}
//初始化数据
const state = {
sum:0
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
})
在actions 可以调用actions 中的另一个方法 context.dispatch(‘action中的方法名’,数据)
getters 相当于 computed 就是对 state中数据计算后的新属性 (放在vuex中的
公共的
计算属性)根computed 一样使用return返回值形式
组件中调用
$store.getters.bigSum
......
const actions = {}
const mutations = {}
const state = {}
const getters = {
bigSum(state){
return state.sum * 10
}
}
//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
组件中的computed属性中使用mapState,mapGetters 映射State,Getters中的属性 在HTML中使用时就可以直接调用计算属性名了{{bigSum}}
不用再 {{$store.getters.bigSum}}
使用mapState,mapGetters 要先引用 import {mapState,mapGetters} from ‘vuex’
两种写法 对象写法 可以修改映射名
数据写法 映射前后属性名相同
mapState方法:用于帮助我们映射state
中的数据为计算属性
computed: {
//借助mapState生成计算属性:sum、school、subject(对象写法)
...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成计算属性:sum、school、subject(数组写法)
...mapState(['sum','school','subject']),
},
mapGetters方法:用于帮助我们映射getters
中的数据为计算属性
computed: {
//借助mapGetters生成计算属性:bigSum(对象写法)
...mapGetters({bigSum:'bigSum'}),
//借助mapGetters生成计算属性:bigSum(数组写法)
...mapGetters(['bigSum'])
},
要先引用 import {mapActionsm,mapMutations} from ‘vuex’
用mapActionsm,mapMutations 就不用在methods里写方法 this.$store.dispatch(‘jiaOdd’,this.n)
但上面的触发函数要传参为n 不然默认传参event会报错
mapActions方法:用于帮助我们生成与actions
对话的方法,即:包含$store.dispatch(xxx)
的函数
methods:{
//靠mapActions生成:incrementOdd、incrementWait(对象形式)
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
//靠mapActions生成:incrementOdd、incrementWait(数组形式)
...mapActions(['jiaOdd','jiaWait'])
}
mapMutations方法:用于帮助我们生成与mutations
对话的方法,即:包含$store.commit(xxx)
的函数
methods:{
//靠mapActions生成:increment、decrement(对象形式)
...mapMutations({increment:'JIA',decrement:'JIAN'}),
//靠mapMutations生成:JIA、JIAN(对象形式)
...mapMutations(['JIA','JIAN']),
}
两种路由的方式
1.router-link标签 (相当于a标签) to 跳转路径
2.编程式路由导航 this.$route.push({name:,query:{ }})
push 有跳转历史 replace 没有跳转历史
安装vue-router,命令:
npm i vue-router
新建目录router/index.js
pages下放路由组件 components 下放常规组件
在main.js中引用
import VueRouter from'Vue-router'
import router from'./router'
应用插件:
Vue.use(VueRouter)
编写 router的index.js
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../pages/About'
import Home from '../pages/Home'
//创建并暴露router实例对象,去管理一组一组的路由规则
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
router-link 实际被解析成
router-view 为路由组件显示位置
为常规组件显示位置
路由组件切换时,默认是被销毁掉了,被切换的时候再去挂载。
每个路由组件都有自己的
$route
属性,里面存储着自己的路由信息。整个应用只有一个router,可以通过组件的
$router
属性获取到。
多级路由
router 里的index.js 添加children配置项
children里的path不加 ‘/’ 使用时会自动加
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写:/news
component:News
},
{
path:'message',//此处一定不要写:/message
component:Message
}
]
}
]
多级路由下的子组件router-link 的 to 路径要写全
路由命名name 多级路由时 添加name属性 跳转时不用path 可以直接使用name(一般多级路由时使用)
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //给路由命名
path:'welcome',
component:Hello,
}
]
}
]
}
<!--简化前,需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>
<!--简化后,直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>
<!--简化写法配合传递参数 -->
<router-link
:to="{
name:'hello',
query:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
query传参 router-link 里的to要绑定属性加";" 路径后加?后key-value传参 &相连
对象写法可以用name query 或者用path query
<!-- 跳转并携带query参数,to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
<!-- 跳转并携带query参数,to的对象写法 -->
<router-link
:to="{
path:'/home/message/detail',
query:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
接收(id 和 title 对应query参数名)
$route.query.id
$route.query.title
params传参 要先修改path路径 使用占位符 表示要传递的参数名
router-link 里的to要绑定属性加";" 路径后直接加’/’ 加value传参
对象写法只能用name params 不能用path params
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数 参数名可修改 接收时对应上即可
component:Detail
}
]
}
]
}
<!-- 跳转并携带params参数,to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<!-- 跳转并携带params参数,to的对象写法 -->
<router-link
:to="{
name:'xiangqing',
params:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
接收 (id 和 title 对应path占位符的名字 可修改)
$route.params.id
$route.params.title
props 在路由中添加props 属性 指定传参属性 在接收组件中使用props直接接收即可
引用时不用再$route.query.id
第一种 直接指定传递的属性和值
第二种 把所有params参数都传给子组件 query传参的不行
第三种 通过传入$route 将route中指定参数传给子组件 query和params的都可以
{
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
}
}
}
接收时props声明传递的参数名 引用时直接调用即可
replace属性 router-link里添加 replace 后 使用路由跳转后无法后退 没有浏览历史了
默认跳转方式为push 是有浏览历史了的 可以返回上一个路径
push
是追加历史记录,replace
是替换当前记录
this.$route.push({name:,query:{ }})
不用route-link 标签了 使用事件触发 调用唯一的router实现路由跳转
this. r o u t e r . f o r w a r d ( ) / / 前 进 t h i s . router.forward() //前进 this. router.forward()//前进this.router.back() //后退
this.$router.go(-2) //可前进或后退 几步
缓存路由组件keep-alive 让不展示的路由组件保持挂载,不被销毁。
从别的组件跳转回来时 组件内数据不会清空而保留不变
添加 include属性指定保留哪个从当前组件实现跳转的子组件的数据
include指定的是
组件名
! 不是name 是组件文件的大名 News.Vue
对路由加 鉴权 路由跳转的时候鉴权是否进行跳转
分为全局守卫(前置守卫 后置守卫 ) 独享守卫 组件内守卫
多种守卫可以搭配使用
全局守卫 前置守卫 beforeEach 发生路由跳转前调用
后置守卫 afterEach 发生路由跳转后调用 这两个发生跳转都会被调用
独享守卫 beforeEnter 调用某个路由就会触发
组件内守卫 beforeRouteEnter
通过路由规则进入
组件时触发 调用组件触发这个 不离开组件不触发afterafterRouteEnter ``通过路由规则离开``组件时触发 离开当前组件才会被触发
组件内守卫在组件内添加 全局守卫,独享守卫在路由配置文件中添加
当直接通过挂载的方式显示组件时不触发 组件内守卫
路由的index配置文件 路由要先声明后暴露
router.beforeEach((to,from,next)=>{ })
to 将要跳转的路由的信息
from 从哪个路由跳转的路由信息
next() 跳转命令 (不加的话 就不会正常跳转到下一个路由)
每个路由可以在meta属性里 添加自己的信息
//全局前置守卫:初始化时执行、每次路由切换前执行
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'
}
})
独享路由守卫 在某一个路由下添加 beforEnter 实现针对某一个路由的鉴权
组件内守卫 编辑组件独有的路由规则时使用 只有通过路由规则进入或离开时才触发
安装 npm i element-ui
完整引用 全部引用 文件会比较大
按需引用 安装 npm install babel-plugin-compoent -D
修改 babel.config.js 记得修改红框(ElementUI 里给的配置会报错)
按需引用 只引用使用的组件 名字为组件名大写 不用引入index.css 使用时会自动解析
Vue.component(‘Button.name’,Button) Button.name这个组件名可以修改 和
相对应
修改过脚手架要重启 npm run serve