//注意区分:js表达式 和 js代码(语句)
//1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
//2.js代码(语句)
(1). if(){}
(2). for(){}
Vue模板语法有2大类
<div class="root">
<!-- 直接使用name属性 -->
<h2>练习两年半,{{name}}</h2>
</div>
<script>
const vm = new Vue({
el: ".root", //绑定div
data() {
return {
name: "鸡你太美", //name属性
};
},
});
</script>
<div class="root">
<a v-bind:href="url"></a> 正常写法
<a :href="url"></a> 简写
</div>
<script>
const vm = new Vue({
el: ".root", //绑定div
data() {
return {
url: "www.xxx.com", //url属性
};
},
});
</script>
v-bind
and v-model
Vue中有2种数据绑定的方式
<div class="root">
<a v-bind:href="url"></a> //正常写法
<a :href="url"></a> //简写
</div>
<div class="root">
<input v-model:value="something" type="text"> //正常写法
<input v-model="something" type="text"> //简写
</div>
const vm = new Vue({
el: ".root", //绑定div
});
const vm = new Vue({
});
vm.$mount('.root')
const vm = new Vue({
el: ".root", //绑定div
data: {
name: "你干嘛啊~", //name属性
},
});
const vm = new Vue({
el: ".root", //绑定div
data() {
return {
name: "你干嘛啊~", //name属性
};
},
});
getter
setter
Object.defineProperty()
把data对象中所有属性添加到vm上。getter
/setter
。getter
/setter
内部去操作(读/写)data中对应的属性。v-on
<div class="root">
<button v-on:click="handle">2.5year</button> //正常写法
<button @click="handle">2.5year</button> //简写
</div>
const vm = new Vue({
el: ".root", //绑定div
methods: {
handle(){
console.log('鸡你太美');
}
},
});
<button v-on:click="handle">2.5year</button> //正常写法
<button @click="handle($event)">2.5year</button> //简写
代码 | 说明 |
---|---|
prevent | 阻止默认事件(常用) |
stop | 阻止事件冒泡(常用) |
once | 事件只触发一次(常用) |
capture | 使用事件的捕获模式 |
self | 只有event.target是当前操作的元素时才触发事件 |
passive | 事件的默认行为立即执行,无需等待事件回调执行完毕 |
按键 | 代码 |
---|---|
回车 | enter |
删除 | delete(捕获“删除”和“退格”键) |
退出 | esc |
空格 | space |
换行 | tab (特殊,必须配合keydown去使用) |
上 | up |
下 | down |
左 | left |
右 | right |
ctrl
、alt
、shift
、meta
keyup
使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。keydown
使用:正常触发事件。keyCode
去指定具体的按键(不推荐)computed
<div class="root">
<p>大家好是我练习时长{{year}}年的...</p>
<p>大家好是我练习时长{{year}}年的...</p>
<p>大家好是我练习时长{{year}}年的...</p>
</div>
<script>
const vm = new Vue({
el: ".root", //绑定div
computed: {
//当只有get()的时候可以简写
year() {
console.log("执行了一次");
return 2.5; //输出值
},
//非简写
// year: {
// get() {
// xxxx
// },
// //set()
// },
},
});
</script>
备注:
computed: {
year: {
get() {
return 2.5;
},
//set有一个形参是修改的新数据
set(value) {
return value;
},
},
},
watch
const vm = new Vue({
watch: {
year: {
//接收两个形参一个是新数据,一个是旧数据
handler(newValue, oldVlue) {
console.log(`数据${oldVlue}被修改了!`);
this.year = newValue;
},
},
},
});
vm.$watch("year", {
immediate: true, //初始化时让handler调用一下
deep: true,//深度监视
//handler什么时候调用?当year发生改变时。
handler(newValue, oldVlue) {
console.log(`数据${oldVlue}被修改了!`);
this.year = newValue;
},
});
immediate
和deep
属性时可以简写 watch: {
year(newValue, oldVlue) {
console.log(`数据${oldVlue}被修改了!`);
this.year = newValue;
},
},
--------------------------
vm.$watch("year", (newValue, oldVlue) => {
console.log(`数据${oldVlue}被修改了!`);
this.year = newValue;
});
v-if
v-for
面试题:react、vue中的key有什么作用?(key的内部原理)
虚拟DOM中key的作用:
对比规则
用index作为key可能会引发的问题
vue会监视data中所有层次的数据。
如何监测对象中的数据?
Vue.set(target,propertyName/index,value)
vm.$set(target,propertyName/index,value)
const vm = new Vue({
data: {
kun: {
name: "鸡你太美",
},
},
methods: {
setName() {
Vue.set(this.kun, "name", "你干嘛啊~");
this.$set(this.kun, "name", "你干嘛啊~");
},
},
});
如何监测数组中的数据?
在Vue修改数组中的某个元素一定要用如下方法:
特别注意:Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性!!!
,则v-model
收集的是value
值,用户输入的就是value
值。
,则v-model
收集的是value
值,且要给标签配置value
值。
input
的value
属性,那么收集的就是checked
(勾选 or 未勾选,是布尔值)input
的value
属性:
v-model
的初始值是非数组,那么收集的就是checked
(勾选 or 未勾选,是布尔值)
v-model
的初始值是数组,那么收集的的就是value
组成的数组
备注:v-model
的三个修饰符:
代码 | 说明 |
---|---|
lazy | 失去焦点再收集数据 |
number | 输入字符串转为有效的数字 |
trim | 输入首尾空格过滤 |
filters
and Vue.filter
Vue.filter(name,callback)
或 new Vue{filters:{}}
代码 | 作用 | 说明 |
---|---|---|
v-bind | 单向绑定解析表达式 | 可简写为 :xxx |
v-model | 双向数据绑定 | $1600 |
v-for | 遍历数组/对象/字符串 | $1600 |
v-on | 绑定事件监听 | 可简写为@ |
v-if | 条件渲染(动态控制节点是否存存在) | v-text会替换掉节点中的内容,{{xx}}则不会。 |
v-else | 条件渲染(动态控制节点是否存存在) | $1600 |
v-show | 条件渲染 (动态控制节点是否展示) | $1600 |
v-text | 向其所在的节点中渲染文本内容。 | $1600 |
v-html | 向指定节点中渲染包含html结构的内容。 |
1.v-html会替换掉节点中所有的内容,{{xx}}则不会。 2.v-html可以识别html结构。 3. 在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。 4.一定要在可信的内容上使用v-html,永不要用在用户提交的内容上! |
v-cloak | 本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。 | 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。 |
v-once | .v-once所在节点在初次动态渲染后,就视为静态内容了。 | 以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。 |
v-pre | 跳过其所在节点的编译过程。 | 可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译。 |
2.
directives
and Vue.directive
const vm = new Vue({
directives: {
//指令名多个单词需要使用kebab-case命名方式并加''
"i-kun": {
//指令与元素成功绑定时(一上来)
bind() {},
//指令所在元素被插入页面时(挂载页面)
inserted() {},
//指令所在的模板被重新解析时
update() {},
},
},
//不需要在挂在页面时调用inserted可以简写
directives: {
"i-kun"(){
xxxxx
},
},
});
Vue.directive('i-kun', {
//指令与元素成功绑定时(一上来)
bind() {},
//指令所在元素被插入页面时(挂载页面)
inserted() {},
//指令所在的模板被重新解析时
update() {},
})
//不需要在挂在页面时调用inserted可以简写
Vue.directive('i-kun',()=>{
xxxxx
})
bind
:指令与元素成功绑定时调用。inserted
:指令所在元素被插入页面时调用。update
:指令所在模板结构被重新解析时调用。v-
,但使用时要加v-
kebab-case
命名方式,不要用camelCase
命名。mounted
: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。beforeDestroy
: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。Vue.extend(options)
创建,其中options
和new Vue(options)
时传入的那个options
几乎一样,但也有点区别,区别如下:
vm
的管理,由vm
中的el
决定服务哪个容器。data
必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。template
可以配置组件结构。 const kun = Vue.extend({
template: `
我叫{{name}}
`,
data() {
return {
name: "你干嘛啊~",
};
},
});
new Vue
的时候传入components
选项Vue.component
(‘组件名’,组件) const vm = new Vue({//局部注册
components:{
kun
}
});
Vue.component('kun',kun)//全局注册
<div id="root">
<kun></kun>
</div>
关于组件名
school
School
(kebab-case命名)
:my-school
(CamelCase命名)
:MySchool
(需要Vue脚手架支持)HTML
中已有的元素名称,例如:h2
、H2
都不行。name
配置项指定组件在开发者工具中呈现的名字。关于组件标签
会导致后续组件不能渲染。一个简写方式
const school = Vue.extend(options)
const school = options
school
组件本质是一个名为VueComponent
的构造函数,且不是程序员定义的,是Vue.extend
生成的。
我们只需要写
或
,Vue解析时会帮我们创建school
组件的实例对象,即Vue帮我们执行的:new VueComponent(options)。
特别注意:每次调用Vue.extend
,返回的都是一个全新的VueComponent
!!!!
关于this
指向
VueComponent的实例对象,以后简称vc(也可称之为:组件实例对象)。Vue的实例对象,以后简称vm。
VueComponent.prototype.__proto__ === Vue.prototype
<template>
页面模板
</template>
<script>
export default {
data() {return {}}, methods: {}, computed: {}, components: {}
}
</script>
<style>
样式定义
</style>
import IKun from './components/IKun.vue'
export default {
name:'App',
components:{
IKun
}
}
<template>
<div>
<IKun></IKun>
</div>
</template>
npm install -g @vue/cli
vue create xxxx
npm run serve
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git 版本管制忽略的配置
├── babel.config.js: babel 的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json:包版本控制文件
vue.js
与vue.runtime.xxx.js
的区别:
vue.js
是完整版的Vue
,包含:核心功能+模板解析器。vue.runtime.xxx.js
是运行版的Vue
,只包含:核心功能;没有模板解析器。vue.runtime.xxx.js
没有模板解析器,所以不能使用template
配置项,需要使用render
函数接收到的createElement
函数去指定具体内容。.....
或
this.$refs.xxx
功能:让组件接收外部传过来的数据
传递数据:
接收数据:
第一种方式(只接收):props:['name']
第二种方式(限制类型):props:{name:String}
第三种方式(限制类型、限制必要性、指定默认值):
props:{
name:{
type:String, //类型
required:true, //必要性
default:'老王' //默认值
}
}
备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。
功能:可以把多个组件共用的配置提取成一个混入对象
使用方式:
{
data(){....},
methods:{....}
....
}
第二步使用混入:
全局混入:Vue.mixin(xxx)
局部混入:mixins:['xxx']
功能:用于增强Vue
本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。
定义插件:
对象.install = function (Vue, options) {
// 1. 添加全局过滤器
Vue.filter(....)
// 2. 添加全局指令
Vue.directive(....)
// 3. 配置全局混入(合)
Vue.mixin(....)
// 4. 添加实例方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx
}
使用插件:Vue.use()
组件化编码流程:
拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。
实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:
一个组件在用:放在组件自身即可。
一些组件在用:放在他们共同的父组件上(状态提升)。
实现交互:从绑定事件开始。
props适用于:
(1).父组件 ==> 子组件 通信
(2).子组件 ==> 父组件 通信(要求父先给子一个函数)
使用v-model时要切记:v-model绑定的值不能是props传过来的值,因为props是不可以修改的!
props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做。
存储内容大小一般支持5MB左右(不同浏览器可能还不一样)
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关API:
xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值。
xxxxxStorage.getItem('person');
该方法接受一个键名作为参数,返回键名对应的值。
xxxxxStorage.removeItem('key');
该方法接受一个键名作为参数,并把该键名从存储中删除。
xxxxxStorage.clear()
该方法会清空存储中的所有数据。
备注:
xxxxxStorage.getItem(xxx)
如果xxx对应的value获取不到,那么getItem
的返回值是null。JSON.parse(null)
的结果依然是null。一种组件间通信的方式,适用于:子组件 ===> 父组件
使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。
绑定自定义事件:
第一种方式,在父组件中:
或
第二种方式,在父组件中:
<Demo ref="demo"/>
......
//this.$refs.xxxx.$on('<事件名>',回调函数)
mounted(){
this.$refs.demo.$on('ikun',this.test)
}
once
修饰符,或$once
方法。<button @ikun.once="ikun">
this.$refs.xxxx.$once('<事件名>',回调函数)
this.$emit('ikun',数据)
模板:this.$emit('<事件名>',参数....)
this.$emit('ikun','鸡你太美')
this.$off('ikun')
模板:this.$off('<事件名>')
this.$off('ikun')
组件上也可以绑定原生DOM事件,需要使用native
修饰符。
注意:通过this.$refs.xxx.$on('atguigu',回调)
绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!
一种组件间通信的方式,适用于任意组件间通信。
安装全局事件总线:
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm
},
......
})
使用事件总线:
接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。
methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}
提供数据:this.$bus.$emit('xxxx',数据)
最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。
一种组件间通信的方式,适用于任意组件间通信。
使用步骤:
安装pubsub:npm i pubsub-js
引入: import pubsub from 'pubsub-js'
接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。
methods(){
demo(data){......}
}
......
mounted() {
this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}
提供数据:pubsub.publish('xxx',数据)
最好在beforeDestroy钩子中,用PubSub.unsubscribe(pid)
去取消订阅。
this.$nextTick(回调函数)
作用:在插入、更新或移除 DOM元素时,在合适的时候给元素添加样式类名。
写法:
准备好样式:
v-enter
:进入的起点v-enter-active
:进入过程中v-enter-to
:进入的终点v-leave
:离开的起点v-leave-active
:离开过程中v-leave-to
:离开的终点使用
包裹要过度的元素,并配置name属性:
<transition name="hello">
<h1 v-show="isShow">你好啊!</h1>
</transition>
备注:若有多个元素需要过度,则需要使用:
,且每个元素都要指定key
值。
方法一
在vue.config.js中添加如下配置:
devServer:{
proxy:"http://localhost:5000"
}
说明:
方法二
编写vue.config.js配置具体代理规则:
module.exports = {
devServer: {
proxy: {
'/api1': { 匹配所有以 '/api1'开头的请求路径
target: 'http://localhost:5000', 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api1': ''}
},
'/api2': { 匹配所有以 '/api2'开头的请求路径
target: 'http://localhost:5001', 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
}
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
changeOrigin默认值为true
说明:
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件 。
分类:默认插槽、具名插槽、作用域插槽
使用方式:
父组件中:
<Category>
<div>html结构1</div>
</Category>
子组件中:
<template>
<div>
<!-- 定义插槽 -->
<slot>插槽默认内容...</slot>
</div>
</template>
父组件中:
<Category>
<template slot="center"> slot这个能直接写在标签中<div slot="xxx"></div>
<div>html结构1</div>
</template>
<template v-slot:footer> v-slot这个必须要在template中添加不然报错
<div>html结构2</div>
</template>
</Category>
子组件中:
<template>
<div>
<!-- 定义插槽 -->
<slot name="center">插槽默认内容...</slot>
<slot name="footer">插槽默认内容...</slot>
</div>
</template>
作用域插槽:
理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)
具体编码:
父组件中:
<Category>
<template scope="scopeData">
<!-- 生成的是ul列表 -->
<ul>
<li v-for="g in scopeData.games" :key="g">{{g}}</li>
</ul>
</template>
</Category>
<Category>
<template slot-scope="scopeData">
<!-- 生成的是h4标题 -->
<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
</template>
</Category>
子组件中:
<template>
<div>
<slot :games="games"></slot>
</div>
</template>
<script>
export default {
name:'Category',
props:['title'],
//数据在子组件自身
data() {
return {
games:['红色警戒','穿越火线','劲舞团','超级玛丽']
}
},
}
</script>
提示:作用域插槽也能像具名插槽一样添加name属性
<slot name='<插槽名>' :ikun='<数据>'></slot>
创建文件:src/store/index.js
//引入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
中创建vm时传入store
配置项
......
//引入store
import store from './store'
......
//创建vm
new Vue({
el:'#app',
render: h => h(App),
store
})
初始化数据、配置actions
、配置mutations
,操作文件store.js
//引入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,
})
组件中读取vuex中的数据:$store.state.sum
组件中修改vuex中的数据:$store.dispatch('action中的方法名',数据)
或 $store.commit('mutations中的方法名',数据)
备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写
dispatch
,直接编写commit
概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。
在store.js
中追加getters
配置
......
const getters = {
bigSum(state){
return state.sum * 10
}
}
//创建并暴露store
export default new Vuex.Store({
......
getters
})
组件中读取数据:$store.getters.bigSum
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'])
},
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']),
}
备注:mapActions与mapMutations使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。
目的:让代码更好维护,让多种数据分类更加明确。
修改store.js
const countAbout = {
namespaced:true,//开启命名空间
state:{x:1},
mutations: { ... },
actions: { ... },
getters: {
bigSum(state){
return state.sum * 10
}
}
}
const personAbout = {
namespaced:true,//开启命名空间
state:{ ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
countAbout,
personAbout
}
})
开启命名空间后,组件中读取state数据:
//方式一:自己直接读取
this.$store.state.personAbout.list
//方式二:借助mapState读取:
...mapState('countAbout',['sum','school','subject']),
开启命名空间后,组件中读取getters数据:
//方式一:自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二:借助mapGetters读取:
...mapGetters('countAbout',['bigSum'])
开启命名空间后,组件中调用dispatch
//方式一:自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二:借助mapActions:
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
开启命名空间后,组件中调用commit
//方式一:自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二:借助mapMutations:
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
安装vue-router,命令:npm i vue-router
应用插件:Vue.use(VueRouter)
编写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 router
实现切换(active-class可配置高亮样式)
About
指定展示位置
pages
文件夹,一般组件通常存放在components
文件夹。$route
属性,里面存储着自己的路由信息。$router
属性获取到。配置路由规则,使用children配置项:
routes:[
{
path:'/about',
component:About,
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path:'news', //此处一定不要写:/news
component:News
},
{
path:'message',//此处一定不要写:/message
component:Message
}
]
}
]
跳转(要写完整路径):
News
传递参数
跳转
跳转
接收参数:
$route.query.id
$route.query.title
作用:可以简化路由的跳转。
如何使用
给路由命名:
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' //给路由命名
path:'welcome',
component:Hello,
}
]
}
]
}
简化跳转:
跳转
跳转
跳转
配置路由,声明接收params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail
}
]
}
]
}
传递参数
跳转
跳转
特别注意:
1.路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!
2.如果想实现params参数的可传可不传要在路由文件对应里有配置中的paht
最后添加?
3.如果params值为空地址可能错处为了避免params为空可在传递参数后添加|| undefined
接收参数:
$route.params.id
$route.params.title
作用:让路由组件更方便的收到参数
{
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
}
}
}
的replace属性push
和replace
,push
是追加历史记录,replace
是替换当前记录。路由跳转时候默认为push
replace
模式:News
作用:不借助
实现路由跳转,让路由跳转更加灵活
具体编码:
//$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() //可前进也可后退
编程式路由可能出现多次点击按钮报错的情况,原因是push和repalce返回的是一个Promise,我们调用时没用传递对应的回调函数,解决方法是重写push和repalce
//重写vueRouter的push方法解决编程式路由连点报错的问题
//备份push方法
const clonePush = VueRouter.prototype.push
const cloneReplace = VueRouter.prototype.repalce
//重写push方法
VueRouter.prototype.push = function (to,resolve,reject) {
if(resolve && reject) {
clonePush.call(this,to,resolve,reject)
} else {
clonePush.call(this,to,()=>{},()=>{})
}
}
//重写repalce方法
VueRouter.prototype.replace = function (to,resolve,reject) {
if(resolve && reject) {
cloneReplace.call(this,to,resolve,reject)
} else {
cloneReplace.call(this,to,()=>{},()=>{})
}
}
作用:让不展示的路由组件保持挂载,不被销毁。
具体编码:
activated
路由组件被激活时触发。deactivated
路由组件失活时触发。作用:对路由进行权限控制
分类:全局守卫、独享守卫、组件内守卫
全局守卫:
//全局前置守卫:初始化时执行、每次路由切换前执行
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'
}
})
独享守卫:
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()
}
}
组件内守卫:
//进入守卫:通过路由规则,进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫:通过路由规则,离开该组件时被调用
beforeRouteLeave (to, from, next) {
}