脚手架文件结构
node_modules
public
favicon.ico 页签图标
index.html 主页面
src
assets 存放静态资源
logo.png
component 存放组件
HelloWorld.vue
App.vue 汇总所有组件
main.js 入口文件
.gitignore git版本管理忽略文件
babel.config.js babel配置文件 (ps:babel可以将es6+语法转换为浏览器兼容的语法)
package.json 应用包配置文件
README.md 应用描述文件
package.lock.json 包版本控制文件
不能改的目录名及文件名:public、favicon.ico、index.html、src、main.js
不能改的目录名及文件名:public、favicon.ico、index.html、src、main.js
关于不同版本的Vue的说明
-
vue.js 与 vue.xxx.js的区别:
vue.js是完整版的Vue,包含:核心功能+模板解析器
vue.runtime.xxx.js是运行版的Vue,只包含:核心功能,没有模板解析器 -
因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容
-
ps:开发的时候需要模板解析器,上线的时候不再需要模板解析器,所以vue提供了精简版的运行版Vue,可以减少打包后的体积,节省空间
vue.config.js配置文件
vue inspect > output.js 查看webpack.config.js文件的配置(只读)
ref属性
- 被用来给元素或子组件注册引用信息(id替代者)
- 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
- 使用方式:
打标识:<h1 ref="xxx">...</h1>
或<School ref="xxx">...</School>
获取:this.$refs.xxx
配置项props
- 功能:让组件接收外部传过来的数据
1.传递数据
<Demo name="xxx" age="xxx"> // 此时,xxx是字符串
<Demo :name="yyy" :age="yyy"> // 此时,yyy是js表达式
2.接收数据
第一种方式(只接收)
props: ['name', 'age']
第二种方式(限制数据类型)
props: {
name: String,
age: Number
}
第三种方式(限制数据类型、限制必要性、指定默认值)
props: {
name: {
type: String, // 类型
required: true // 必要性
}
age: {
type: Number,
default: 99 // 默认值
}
}
备注:
- props是只读的,Vue底层会监测对props的修改,如果进行了修改,就会发出警告;
若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去data中修改 - 通过props接收到的数据,优先级比data中的数据高,如果同时指定props和data中的同名数据,会优先显示props传过来的
mixin(混入/混合)
-
功能:可以把多个组件共用的配置提取成一个混入对象
-
使用方式:
- 定义混合,并暴露,例如:
export const mixin = {
data() {...},
methods: {...},
...
}
- 导入使用混合,例如:
// 导入混合
import { xxx } from '文件路径'
- 使用混合——全局混入
Vue.mixin(xxx)
- 使用混合——局部混入
mixins: ['xxx']
插件plugins
-
功能:用于增强Vue
-
本质:包含install方法的一个对象,install的第一个参数是Vue构造函数,第二个以后的参数是插件使用者传递的数据
-
定义插件(别忘了暴露出去):
对象.install = function(Vue, options) {
// 可以添加全局过滤器
Vue.filter(...)
// 可以添加全局指令
Vue.directive(...)
// 可以配置全局混入
Vue.mixin(...)
// 可以给Vue原型上添加方法、属性
Vue.prototype.方法名 = function() {}
Vue.prototype.属性名 = xxx
}
export { 对象 }
// 简写
export default {
install() {
...
}
}
- 引入、使用插件
import xxx from '文件路径' // 默认导出的导入
import { xxx } from '文件路径' // 命名导出的导入
Vue.use(xxx)
scoped样式
-
作用:让样式在局部生效,防止冲突
-
写法:
<style scoped></style>
TodoList案例
组件化编码流程
1. 拆分静态组件
通常按照功能点来拆分组件,命名不要与html元素冲突
2. 实现动态组件
-
数据的类型、名称是什么?
对象数组(对象属性:id、事情名称、是否完成) -
数据存放位置?
(1). 一个组件在用:放在组件自身即可
(2). 一些组件在用:放在它们共同的父组件上(状态提升)
3. 实现交互:从绑定事件开始
注意点
-
props
适用于:父组件 ==> 子组件 通信
子组件 ==> 父组件 通信(要求父组件先给子组件一个函数)
目前所学知识只能支持从父组件传递数据给子组件(props)
!但可以通过以下方式从子组件传递数据给父组件:
第一步:父组件传递一个函数rec给子组件,子组件通过props
接收,这个函数就会出现在子组件实例对象上
第二步:子组件可以调用rec函数,将想要传递给父组件的数据作为参数传给父组件 -
使用v-model时要切记:v-model绑定的值不能是
props
传过来的值,因为props
是不可以修改的 -
props
传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但不推荐这样做
webStorage
-
存储内容大小一般支持5MB左右(不同浏览器可能不一样)
-
浏览器端通过
window.sessionStorage
和window.localStorage
属性来实现本地存储机制 -
相关API:
xxxxxStorage.setItem('key', 'value')
该方法接收一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对应的值
xxxxxStorage.getItem('key')
该方法接收一个键名作为参数,返回键名对应的值
xxxxxStorage.removeItem('key')
该方法接收一个键名作为参数,并把该键名从存储中删除
xxxxxStorage.clear()
该方法会清空存储中所有数据
-
备注
-
sessionStorage存储的内容会随着浏览器窗口关闭而消失
-
localStorage存储的内容,需要手动清除才会消失,不会随着浏览器窗口关闭而消失
-
xxxxxStorage.getItem('key')
如果key对应的value获取不到,那么getItem的返回值是null -
存储对象类型的数据时,需要先转换成JSON字符串再存储:
xxxxxStorage.setItem('key', JSON.stringify(obj))
-
读取对象类型的数据时,需要将读取出来的JSON字符串转换成对象类型:
JSON.parse(xxxxxStorage.setItem('key'))
-
JSON.parse(null)
的结果依然是null
-
组件的自定义事件
-
一种组件间通信的方式,适用于:子组件 ===> 父组件
-
使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件**(事件回调在A中**)
-
绑定自定义事件:
- 第1种方式:在父组件中:
<子组件名 v-on:自定义事件名="事件回调函数" />
<子组件名 @自定义事件名="事件回调函数" /> // 简写
- 第2种方式:在父组件中:
<子组件名 ref="demo" />
...
mounted() {
this.$refs.demo.$on('自定义事件名', this.事件回调函数名)
}
// 注意事件回调要写在methods里,不能写在$on方法中,因为this会指向子组件实例对象,除非用箭头函数
- 若想让自定义事件只能触发一次,可以使用
once
事件修饰符,或$once
方法
<子组件名 @自定义事件名.once="事件回调函数" /> // once修饰符
this.$refs.demo.$on('自定义事件名', this.事件回调函数名) // $once方法
- 触发自定义事件(在子组件中触发)
this.$emit('自定义事件名', 数据)
- 解绑自定义事件
this.$off('自定义事件名') // 解绑1个自定义事件
this.$off(['自定义事件1', '自定义事件2', ...]) // 解绑多个自定义事件
this.$off() // 解绑组件的所有自定义事件
- 组件上也可以绑定原生DOM事件,需要使用
native
事件修饰符,否则会被解析为自定义事件 - 再次注意:通过
this.$refs.子组件名.$on('自定义事件名', 事件回调)
绑定自定义事件时,回调函数要么配置在methods中,要么直接箭头函数在$on方法里写,否则this指向会出问题!
全局事件总线
-
一种组件间通信的方式,适用于任意组件间通信
-
安装全局事件总线:
new Vue({
....
beforeCreate() {
Vue.prototype.$bus = this // 安装全局事件总线,$bus就是当前应用的vm
}
})
- 使用事件总线
- 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调函数留在A组件自身
methods: {
demo(data) {}
},
...
mounted() {
this.$bus.$on('事件名', this.demo)
}
- 提供数据
this.$bus.$emit('事件名', 数据)
- 最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件
beforeDestroy() {
this.$bus.$off('事件名')
}
消息订阅与发布(pubsub)
-
一种组件间通信的方式,适用于任意组件间通信
-
使用步骤:
-
安装pubsub:
npm i pubsub
-
引入:
import pubsub from 'pubsub-js'
-
接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调函数留在A组件自身
methods: {
demo(data) {}
}
...
mounted() {
this.pid = pubsub.subscribe('消息名', this.demo) // 订阅消息
}
- 提供数据:
pubsub.publish('消息名', 数据)
- 最好在beforeDestroy钩子中,用
pubsub.unsubscribe(pid)
取消订阅
nextTick
- 语法:
this.$nextTick(回调函数)
- 作用:在下一次DOM节点更新结束后执行回调函数
- 应用场景:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行
Vue封装的过渡与动画
- 作用:在插入、更新或移除DOM元素时,在合适的时候给元素增加样式类名
- 过渡写法:
-
准备好样式
元素进入的样式
v-enter
进入的起点v-enter-active
进入过程中v-enter-to
进入的终点元素离开的样式
v-leave
离开的起点v-leave-active
离开过程中v-leave-to
离开的终点 -
使用
<transition>
包裹要过渡的元素,并配置name属性
<transition name="hello">
<h1 v-show="isShow">你好啊</h1>
</transition>
- 备注:若有多个元素需要过渡,需要使用
<transition-group>
包裹,且每个元素都要指定key值
- 动画写法:
只需要指定 v-enter-active
和 v-leave-active
的样式以及定义动画:
@keyframes 动画名 {
from{
...
}
to {
...
}
}
发Ajax请求的几种方式:
- XMLHttpRequest
- jQuery(封装xhr)
- axios(封装xhr)
- fetch
- vue-resource(封装xhr)
Vue cli(脚手架)配置代理
方法一
在Vue.config.js中添加如下配置:
devServer: {
// 请求的url
proxy: "http://localhost:5000"
}
- 说明:
- 优点:配置简单,请求资源时直接发给前端(8080)即可
- 缺点:不能配置多个代理,不能灵活地控制请求是否走代理
- 工作方式:若按照上述配置代理,当请求前端存在的资源时,该请求会直接返回前端资源,不会转发给服务器;只有当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)
方法二
编写Vue.config.js配置具体代理规则:
module.exports = {
...
devServer: {
proxy: {
'/api1': { // 匹配所有以 '/api1' 开头的请求路径
target: 'http://localhost:5000', // 代理目标的基础路径
pathRewrite: {'^/api1': ''},
ws: true, // 用于支持websocket
changeOrigin: true // 用于控制请求头中的host值
},
'/api2': { // 匹配所有以 '/api2' 开头的请求路径
target: 'http://localhost:5001', // 代理目标的基础路径
pathRewrite: {'^/api2': ''},
ws: true, // 用于支持websocket
changeOrigin: true // 用于控制请求头中的host值
}
}
}
}
/*
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000(被请求的服务器的host)
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080(实际的host)
changeOrigin默认值为true
*/
- 说明:
- 优点:可以配置多个代理,且可以灵活地控制请求是否走代理
- 缺点:配置略微繁琐,请求资源时必须加前缀
注意:前端发送请求时,url要写代理服务器的主机名和端口 + 请求的具体路径 (例如 /students),
如果用第二种方式配置代理服务器还要加上前缀 (例如 http://localhost:8080/api1/students)
插槽
-
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信方式
适用于 父组件 ===> 子组件
-
分类:默认插槽、具名插槽、作用域插槽
-
使用方式
- 默认插槽
// 父组件中:
<Category>
<div>html结构</div>
</Category>
// 子组件中:
<template>
<div>
<!-- 定义插槽 -->
<slot>插槽默认内容</slot>
</div>
</template>
- 具名插槽
// 父组件中:
<Category>
<template slot="center">
<div>html结构1</div>
</template>
<template v-slot="footer">
<div>html结构2</div>
</template>
</Category>
// 子组件中:
<template>
<div>
<!-- 定义插槽 -->
<slot name="center">插槽默认内容1</slot>
<slot name="footer">插槽默认内容2</slot>
</div>
</template>
-
作用域插槽
理解:数据在组件本身,当根据数据生成的结构需要组件的使用者来决定。
(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)
// 父组件中:
<Category>
<template slot="scopeData">
<!-- 生成的是ul列表 -->
<ul>
<li v-for="(g, index) in scopeData.games" :key="index">{{g}}</li>
</ul>
</template>
<template slot-scope="scopeData">
<!-- 生成的是h4列表 -->
<h4 v-for="(g, index) in scopeData.games" :key="index">{{g}}</h4>
</template>
</Category>
// 子组件中:
<template>
<div>
<!-- 定义插槽 -->
<slot :games="games">插槽默认内容</slot>
</div>
</template>
<script>
export default {
name: 'Category',
props: ['title'],
data() {
return {
// 数据在子组件自身
games: ['红色警戒', '和平精英', '羊了个羊', '合成大西瓜'],
}
}
}
</script>
备注:作用域插槽也可以起名name
vuex
**概念:**专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
应用场景:多个组件需要共享数据时(多个组件依赖于同一状态、来自不同组件的行为需要变更同一状态)
搭建vuex环境
- 创建文件:
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
,操作文件src/store/index.js
// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)
// 准备actions——用于响应组件中的动作
const actions = {
incrementOdd(context, value) {
if (context.state.sum % 2) {
context.commit('INCREMENTODD', value)
}
},
}
// 准备mutations——用于操作数据(state)
const mutations = {
INCREMENTODD(state, value) {
state.sum += value
},
}
// 准备state——用于存储数据
const state = {
sum: 0 // 和
}
-
组件中读取vuex中的数据:
$store.state.变量名
-
组件中修改vuex中的值:
¥store.dispatch('actions中的方法名', 数据)
或$storemit('mutations中的方法名', 数据)
备注:若没有网络请求或其他业务逻辑,组件中可以越过
actions
:即不写dispatch
,直接编写commit
getters的使用
-
概念:当state中的数据需要经过加工后使用时,可以使用getters加工
-
在
src/store/index.js
中追加getters
配置...... const getters = { bogSum() { return state.sum * 10 } } // 创建并导出store export default new Vuex.Store({ ... getters, })
-
组件中读取数据:
$store.getters.bigSum
4个map方法的使用
-
mapState方法:用于映射
State
中的数据为计算属性import { mapState } from 'vuex' ... computed: { ... // 借助mapState生成计算属性,从state中读取数据(对象写法) ...mapState({he: 'sum', xuexiao: 'school', xueke: 'subject'}), // 借助mapState生成计算属性,从state中读取数据(数组写法) ...mapState(['sum', 'school', 'subject']), }
-
mapGetters方法:用于映射
getters
中的数据为计算属性import { mapGetters } from 'vuex' ... computed: { // 借助mapGetters生成计算属性,从getters中读取数据(对象写法) ...mapGetters({bigSum: 'bigSum'}) // 借助mapGetters生成计算属性,从getters中读取数据(数组写法) ...mapGetters(['bigSum']) }
-
mapActions方法:用于生成与
actions
对话的方法,即:包含$store.dispatch(xxx)
的函数import { mapActions } from 'vuex' ... methods: { // 借助mapActions生成对应方法,方法中会调用dispatch去联系actions(对象写法) ...mapActions({jiaOdd: 'incrementOdd', jiaWait: 'incrementWait'}), // 借助mapActions生成对应方法,方法中会调用dispatch去联系actions(对象写法) ...mapActions(['incrementOdd', 'incrementWait']), }
-
mapMutations方法:用于生成与
mutations
对话的方法,即:包含$storemit(xxx)
的函数import { mapMutations } from 'vuex' ... methods: { // 借助mapMutations生成对应方法,方法中会调用commit去联系mutations(对象写法) ...mapMutations({increment: 'INCREMENT', decrement: 'DECREMENT'}), // 借助mapMutations生成对应方法,方法中会调用commit去联系mutations(对象写法) ...mapMutations(['INCREMENT', 'DECREMENT']), }
注意:mapActions 与 mapMutations 使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象
模块化+命名空间
-
目的:让代码更好维护,让多种数据分类更加明确
-
修改
store.js
const countAbout = { namespaced: true, // 开启命名空间 state: {...}, actions: {...}, mutations: {...}, getters: { bigSum() { return state.sum * 10 } }, } const personAbout = { namespaced: true, // 开启命名空间 state: {...}, actions: {...}, mutations: {...}, getters: {...}, } const store = new Vuex.Store({ modules: { countAbout, // 对象属性简写机制 personAbout } })
-
开启命名空间后,组件中读取state数据:
// 方式一:直接读取state this.$store.state.countAbout.sum this.$store.state.countAbout.school this.$store.state.countAbout.subject // 方式二:借助mapState ...mapState('countAbout', ['sum', 'school', 'subject'])
-
开启命名空间后,组件中读取getters数据:
// 方式一:直接读取getters this.$store.getters['countAbout/bigSum'] // 方式二:借助mapGetters ...mapGetters('countAbout', ['bigSum'])
-
开启命名空间后,组件中调用dispatch
// 方式一:直接dispatch this.$store.dispatch('countAbout/incrementOdd', this.n) this.$store.dispatch('countAbout/incrementWait', this.n) // 方式二:借助mapActions ...mapActions('countAbout', ['incrementOdd', 'incrementWait'])
-
开启命名空间后,组件中调用commit
methods: { // 方式一:直接commit this.$store.commit('countAbout/INCREMENT', this.n) this.$store.commit('countAbout/DECREMENT', this.n) // 方式二:借助mapMutations ...mapActions('countAbout', {increment: 'INCREMENT', decrement: 'DECREMENT'}) }
路由
概念
路由 (route)
路由就是一组 key-value 的对应关系,key为路径,value为 function 或 component
多个路由 (route) 需要经过路由器 (router) 的管理
路由分类
-
后端路由
value 是 function,用于处理客户端处理的请求
工作过程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据
-
前端路由
value 是 component,用于展示页面内容
工作过程:当浏览器的路径改变时,对应的组件就会显示
vue-router
vue的一个插件库,专门用来实现SPA应用(单页面应用)
对SPA应用的理解:
- 单页Web应用(single page web application, SPA)
- 整个应用只有一个完整的页面
- 点击页面中的导航链接不会刷新页面,只会做页面的局部更新
- 数据需要通过ajax请求获取
基本使用
-
安装vue-router,
npm i vue-router@3
-
在
src/router/index.js
下编写router配置项// 引入VueRouter import VueRouter from 'vue-router' // 引入组件 import Home from '../components/Home' import Home from '../components/Home' // 创建并导出router实例对象,管理一组一组的路由规则 export default new VueRouter({ routes: [ { path: '/home', component: Home }, { path: '/about', component: About } ] })
-
在main.js 中引入并应用插件,引入配置好的路由器:
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import router from './router'
-
实现切换(active-class可配置切换样式、to配置url)
<router-link active-class="active" to="/about">About</router-link>
-
指定组件展示位置
<router-view></router-view>
几个注意点:
- 路由组件通常存放在
pages
文件夹,一般组件通常存放在components
文件夹 - 通过切换,"隐藏"了的路由组件,默认是被销毁的,需要的时候再去挂载
- 每个组件都有自己的
$route
属性,里面存储着自己的路由信息,不同组件的$route
不同 - 整个应用只有一个router,可以通过组件的
$router
属性获取到
嵌套路由(多级路由)
-
配置路由规则,使用
children
配置项routes: [ { path: '/home', component: Home children: [ { path: 'news', // 不要写 / component: News }, { path: 'message', // 不要写 / component: Message } ] }, { path: '/about', component: About, }, ]
-
跳转(要写完整路径):
<router-link to="/home/news">News</router-link> <router-link to="/home/message">Message</router-link>
路由的query参数
-
传递参数
<!-- 跳转路由并携带query参数,to的字符串写法 --> <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">查看消息</router-link> <!-- 跳转路由并携带query参数,to的对象写法 --> <router-link :to="{ path: '/home/message/detail', query: { id: m.id, title: m.title } }">查看消息</router-link>
-
接收参数
... <li>消息的编号:{{$route.query.id}}</li> <li>消息的标题:{{$route.query.title}}</li>
命名路由
-
作用:可以简化路由的跳转
-
如何使用
-
给路由命名,再
src/router/index.js
中配置{ 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>
-
路由的params参数
-
配置路由
routes: { path: '/home', component: Home, children: [ { path: 'news', component: News }, { path: 'Message', component: Message, children: [ { name: 'xiangqing', path: 'detail/:id/:title', // 使用占位符声明接收params参数 component: Detail } ] } ] }
-
传递参数
<!-- 跳转路由并携带params参数,to的字符串写法 --> <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> <!-- 跳转路由并携带params参数,to的对象写法 --> <router-link :to="{ name: 'xiangqing', // 携带params参数只能用name,不能用path params: { id: m.id, title: m.title } }" >{{m.title}}</router-link>
特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置项
-
接收参数
$route.params.id
$route.params.title
路由的props配置
作用:让路由组件更加方便地收到参数
{
name: 'xiangqing',
path: 'detail/:id/:title',
component: Detail,
// 第1种写法,props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件
props: {a: 1, b: 'hello'},
// 第2种写法,props值为布尔值,把路由收到的所有params参数通过props传给Detail组件
props: true,
// 第3种写法,props值为函数,该函数返回的对象中每一组key-value组合都会通过props传给Detail组件
props($route) {
return {
id: $route.query.id,
title: $route.query.title
}
},
//利用解构赋值
props({query}) {
return {id: query.id, title: query.title}
},
// 不推荐(可读性差)
props({query: {id, title}}) {
return {id, title}
},
}
router-link 的 replace 属性
-
作用:控制路由跳转时操作浏览器历史记录的模式
-
浏览器的历史记录有2种写入方式:
push
和replace
,push
是追加历史记录,replace
是替换当前记录,路由跳转时默认为push
-
如何开启
replace
模式:<!-- 完整写法 --> <router-link :replace="true" ......>About</router-link> <!-- 简写 --> <router-link replace ......>Home</router-link>
编程式路由导航
-
作用:不借助
router-link
实现路由跳转,让路由跳转更加灵活 -
代码:
// push跳转 this.$router.push({ name: 'xiangqing', params: { ... }, }) // replace跳转 this.$router.replace({ path: '/home/message/detail', params: { ... } }) // forward前进 this.$router.forward() // back后退 this.$router.back() // go可前进也可后退,需要指定前进/后退的步数 this.$router.go(n)
缓存路由组件
-
作用:让不展示的路由组件保持挂载,不被销毁
-
代码:
<!-- 指定单个路由组件不被销毁 --> <keep-alive include="News"> <router-view></router-view> </keep-alive> <!-- 指定多个路由组件不被销毁,include前要加冒号,让引号里的内容被解析为js表达式 --> <keep-alive :include="['News', 'Message]"> <router-view></router-view> </keep-alive>
-
注意:
- 如果不写include,默认
keep-alive
包裹的所有路由组件都不被销毁 - include里面写的是组件名,指定哪个组件保持挂载,不被销毁
- 如果不写include,默认
2个新的生命周期钩子
-
作用:路由组件所独有的钩子,用于捕获路由组件的激活状态
-
使用:
activated() { // 路由组件被激活时触发 }, deactivated() { // 路由组件失活时触发 }
-
复习所有的生命周期钩子:
beforeCreate:vm被创建,生命周期、事件初始化,但数据监测、数据代理还未开始
created:已经做完了数据监测、数据代理,可以用vm访问data、methods
beforeMount:页面显示的是未经Vue编译的DOM结构
mounted:Vue解析模板,生成了虚拟DOM,将内存中的虚拟DOM转为真实DOM并挂载到了页面上
beforeUpdate:更新了数据,但Vue未将根据新数据生成的DOM挂载到页面上
updated:Vue根据新数据生成新的虚拟DOM,与旧的DOM进行diff比较,将新的真实DOM挂载到了页面上
beforeDestroy:vm/组件实例对象被销毁之前
destroyed:vm/组件实例对象被销毁之后
nextTick:下一次DOM节点更新结束后:即更新了数据,Vue修改DOM并挂载完毕后
activated:路由组件被激活
deactived:路由组件失活
路由守卫
-
作用:对路由进行权限控制
-
分类:全局守卫、独享守卫、组件内守卫
-
全局守卫
// 全局前置路由守卫——初始化时、每次路由切换之前会被调用 router.beforeEach((to, from, next) => { console.log('前置路由守卫', to, from) if (to.meta.isAuth) { // 判断是否需要验证权限,需要在每个route中配置meta对象 if (localStorage.getItem('school') === 'fzu') { next() } else { alert('当前学校无权限查看!') } } else { next() } }) // 全局后置路由守卫——初始化时、每次路由切换之后会被调用 router.afterEach((to, from) => { console.log('后置路由守卫', to, from) document.title = to.meta.title || 'Vue学习' }) export default router
-
独享守卫
route: [ ... { name: 'xinwen', ... meta: {isAuth: true, title: '新闻'}, // 独享路由守卫 beforeEnter: (to, from, next) => { if (to.meta.isAuth) { if (localStorage.getItem('school') === 'fzu') { next() } else { alert('您无权查看新闻!') } } else { next() } }, } ]
注意: 独享路由守卫只有一种
beforeEnter
-
组件内守卫
// 进入守卫:通过路由规则进入该组件时被调用 beforeRouteEnter (to, from, next) { ... }, // 离开守卫:通过路由规则离开该组件时被调用 afterRouteLeave (to, from, next) { ... }
路由器的2种工作模式
-
对于一个 url 来说,
#
以及后面的内容都是 hash 值 -
hash值不会包含在http请求中,即:不会随着http请求发给服务器
-
hash模式:
- 地址中永远带着
#
,不美观 - 若以后将地址通过第三方手机app分享,若app校验严格,地址会被标记为不合法
- 兼容性较好
- 地址中永远带着
-
history模式:
- 地址干净美观
- 兼容性与hash模式相比略差
- 应用部署上线后需要后端人员解决刷新页面服务端404的问题
Vue UI 组件库
移动端常用 UI 组件库
- Vant https://youzan.github.io/vant
- Cube UI https://didi.github.io/cube-ui
- Mint UI https://mint-ui.github.io
- Nut UI https://nutui.jd/#/
PC 端常用 UI 组件库
- Element UI https://element.eleme (基于Vue)
- IView UI https://www.iviewui
更多推荐
尚硅谷Vue2学习笔记 (二)
发布评论