Vue笔记(天禹)后四章
文章目录
- 4. Vue中的Ajax
- 4.1. Vue脚手架配置代理
- 4.2. GitHub用户搜索案例
- 4.3. vue-resource
- 4.4. slot插槽
- 4.4.1. 默认插槽
- 4.4.2. 具名插槽
- 4.4.3. 作用域插槽
- 5. Vuex
- 5.1. 理解Vuex
- 5.1.1. Vuex是什么
- 5.1.2. 什么时候使用Vuex
- 5.1.3. Vuex工作原理图
- 5.2. 求和案例
- 5.2.1. 使用纯vue编写
- 5.2.2. 搭建Vuex环境
- 5.2.3. 使用Vuex编写
- 5.3. getters配置项
- 5.4. 四个map方法的使用
- 5.4.1. mapState与mapGetters
- 5.4.2. mapActions与mapMutations
- 5.5. 多组件共享数据
- 5.6. 模块化+命名空间
- 6. Vue Router路由管理器
- 6.1 相关理解
- 6.1.1 vue-router的理解
- 6.1.2 对SPA应用的理解
- 6.2 基本路由
- 6.3. 几个注意事项
- 6.4. 多级路由/嵌套路由
- 6.5. 路由的query参数
- 6.6. 命名路由
- 6.7. 路由的params参数
- 6.8. 路由的props配置
- 6.9. 路由跳转的replace方法
- 6.10编程式路由导航
- 6.10.1 **导航到不同的位置**
- 6.10.2 **替换当前位置**
- 6.11. 缓存路由组件
- 6.12. activated和deactivated
- 6.13. 路由守卫
- 6.13.1. 全局路由守卫
- 6.13.2. 独享路由守卫
- 6.13.3. 组件内路由守卫
- 6.14. 路由器的两种工作模式
- 7. Vue UI组件库
- 7.1 常用UI组件库
- 7.1.1 移动端常用UI组件库
- 7.1.2. PC端常用UI组件库
- 7.2. element-ui基本使用
- 7.3. element-ui按需引入
4. Vue中的Ajax
4.1. Vue脚手架配置代理
本案例需要下载axios库:
npm install axios
vue.config.js
:
module.exports = {pages: {index: {entry: 'src/main.js',},},lintOnSave:false,// 开启代理服务器(方式一)// devServer: {// proxy:'http://localhost:5000'// }//开启代理服务器(方式二)devServer: {proxy: {'/jojo': {target: 'http://localhost:5000',pathRewrite:{'^/jojo':''},// ws: true, //用于支持websocket,默认值为true// changeOrigin: true //用于控制请求头中的host值,默认值为true},'/atguigu': {target: 'http://localhost:5001',pathRewrite:{'^/atguigu':''},// ws: true, //用于支持websocket,默认值为true// changeOrigin: true //用于控制请求头中的host值,默认值为true}}}
}
src/App.vue
:
<template><div id="root"><button @click="getStudents">获取学生信息</button><br/><button @click="getCars">获取汽车信息</button></div>
</template><script>import axios from 'axios'export default {name:'App',methods: {getStudents(){axios.get('http://localhost:8080/jojo/students').then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)})},getCars(){axios.get('http://localhost:8080/atguigu/cars').then(response => {console.log('请求成功了',response.data)},error => {console.log('请求失败了',error.message)})}}}
</script>
效果:
总结:
vue脚手架配置代理服务器:
方法一:在
vue.config.js
中添加如下配置:devServer:{proxy:"http://localhost:5000" }
说明:
- 优点:配置简单,请求资源时直接发给前端即可
- 缺点:不能配置多个代理,不能灵活的控制请求是否走代理
- 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)
- 方法二:
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
说明:
- 优点:可以配置多个代理,且可以灵活的控制请求是否走代理
- 缺点:配置略微繁琐,请求资源时必须加前缀
4.2. GitHub用户搜索案例
public/index.html
:
<!DOCTYPE html>
<html lang=""><head><meta charset="UTF-8"><!-- 针对IE浏览器的特殊配置,含义是让IE浏览器以最高渲染级别渲染页面 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 开启移动端的理想端口 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 配置页签图标 --><link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- 引入bootstrap样式 --><link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css"><!-- 配置网页标题 --><title><%= htmlWebpackPlugin.options.title %></title></head><body><!-- 容器 --><div id="app"></div></body>
</html>
src/main.js
:
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({el:"#app",render: h => h(App),beforeCreate(){Vue.prototype.$bus = this}
})
src/App.vue
:
<template><div class="container"><Search/><List/></div>
</template><script>import Search from './components/Search.vue'import List from './components/List.vue'export default {name:'App',components:{Search,List},}
</script>
src/components/Search.vue
:
<template><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search" v-model="keyWord"/> <button @click="getUsers">Search</button></div></section>
</template><script>import axios from 'axios'export default {name:'Search',data() {return {keyWord:''}},methods: {getUsers(){//请求前更新List的数据this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {console.log('请求成功了')//请求成功后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})},error => {//请求后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})})}}}
</script>
src/components/List.vue
:
<template><div class="row"><!-- 展示用户列表 --><div class="card" v-show="info.users.length" v-for="user in info.users" :key="user.id"><a :href="user.html_url" target="_blank"><img :src="user.avatar_url" style='width: 100px'/></a><h4 class="card-title">{{user.login}}</h4></div><!-- 展示欢迎词 --><h1 v-show="info.isFirst">欢迎使用!</h1><!-- 展示加载中 --><h1 v-show="info.isLoading">加载中...</h1><!-- 展示错误信息 --><h1 v-show="info.errMsg">{{errMsg}}</h1></div>
</template><script>export default {name:'List',data() {return {info:{isFirst:true,isLoading:false,errMsg:'',users:[]}}},mounted(){this.$bus.$on('updateListData',(dataObj)=>{//动态合并两个对象的属性this.info = {...this.info,...dataObj}})},beforeDestroy(){this.$bus.$off('updateListData')}}
</script><style scoped>.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;}.card > img {margin-bottom: .75rem;border-radius: 100px;}.card-text {font-size: 85%;}
</style>
效果:
4.3. vue-resource
下载 vue-resource库:
npm i vue-resource
src/main.js
:
import Vue from 'vue'
import App from './App.vue'
import vueResource from 'vue-resource'Vue.config.productionTip = false
Vue.use(vueResource)new Vue({el:"#app",render: h => h(App),beforeCreate(){Vue.prototype.$bus = this}
})
src/App.vue
:
<template><div class="container"><Search/><List/></div>
</template><script>import Search from './components/Search.vue'import List from './components/List.vue'export default {name:'App',components:{Search,List},}
</script>
src/components/Search.vue
:
<template><section class="jumbotron"><h3 class="jumbotron-heading">Search Github Users</h3><div><input type="text" placeholder="enter the name you search" v-model="keyWord"/> <button @click="getUsers">Search</button></div></section>
</template><script>export default {name:'Search',data() {return {keyWord:''}},methods: {getUsers(){//请求前更新List的数据this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(response => {console.log('请求成功了')//请求成功后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})},error => {//请求后更新List的数据this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})})}}}
</script>
src/components/List.vue
:
<template><div class="row"><!-- 展示用户列表 --><div class="card" v-show="info.users.length" v-for="user in info.users" :key="user.id"><a :href="user.html_url" target="_blank"><img :src="user.avatar_url" style='width: 100px'/></a><h4 class="card-title">{{user.login}}</h4></div><!-- 展示欢迎词 --><h1 v-show="info.isFirst">欢迎使用!</h1><!-- 展示加载中 --><h1 v-show="info.isLoading">加载中...</h1><!-- 展示错误信息 --><h1 v-show="info.errMsg">{{errMsg}}</h1></div>
</template><script>export default {name:'List',data() {return {info:{isFirst:true,isLoading:false,errMsg:'',users:[]}}},mounted(){this.$bus.$on('updateListData',(dataObj)=>{this.info = {...this.info,...dataObj}})},beforeDestroy(){this.$bus.$off('updateListData')}}
</script><style scoped>.album {min-height: 50rem; /* Can be removed; just added for demo purposes */padding-top: 3rem;padding-bottom: 3rem;background-color: #f7f7f7;}.card {float: left;width: 33.333%;padding: .75rem;margin-bottom: 2rem;border: 1px solid #efefef;text-align: center;}.card > img {margin-bottom: .75rem;border-radius: 100px;}.card-text {font-size: 85%;}
</style>
总结:
vue项目常用的两个Ajax库:
- axios:通用的Ajax请求库,官方推荐,效率高
- vue-resource:vue插件库,vue 1.x使用广泛,官方已不维护
4.4. slot插槽
4.4.1. 默认插槽
src/App.vue
:
<template><div class="container"><Category title="美食" ><img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""></Category><Category title="游戏" ><ul><li v-for="(g,index) in games" :key="index">{{g}}</li></ul></Category><Category title="电影"><video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video></Category></div>
</template><script>import Category from './components/Category'export default {name:'App',components:{Category},data() {return {games:['植物大战僵尸','红色警戒','空洞骑士','王国']}},}
</script><style scoped>.container{display: flex;justify-content: space-around;}
</style>
src/components/Category.vue
:
<template><div class="category"><h3>{{title}}分类</h3><!-- 定义一个插槽(挖个坑,等着组件的使用者进行填充) --><slot>我是一些默认值,当使用者没有传递具体结构时,我会出现</slot></div>
</template><script>export default {name:'Category',props:['title']}
</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
</style>
效果:
4.4.2. 具名插槽
src/App.vue
:
<template><div class="container"><Category title="美食" ><img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""><a slot="footer" href="http://www.atguigu.com">更多美食</a></Category><Category title="游戏" ><ul slot="center"><li v-for="(g,index) in games" :key="index">{{g}}</li></ul><div class="foot" slot="footer"><a href="http://www.atguigu.com">单机游戏</a><a href="http://www.atguigu.com">网络游戏</a></div></Category><Category title="电影"><video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video><template v-slot:footer><div class="foot"><a href="http://www.atguigu.com">经典</a><a href="http://www.atguigu.com">热门</a><a href="http://www.atguigu.com">推荐</a></div><h4>欢迎前来观影</h4></template></Category></div>
</template><script>import Category from './components/Category'export default {name:'App',components:{Category},data() {return {games:['植物大战僵尸','红色警戒','空洞骑士','王国']}},}
</script><style>.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}
</style>
src/components/Category.vue
:
<template><div class="category"><h3>{{title}}分类</h3><!-- 定义一个插槽(挖个坑,等着组件的使用者进行填充) --><slot name="center">我是一些默认值,当使用者没有传递具体结构时,我会出现1</slot><slot name="footer">我是一些默认值,当使用者没有传递具体结构时,我会出现2</slot></div>
</template><script>export default {name:'Category',props:['title']}
</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
</style>
效果:
4.4.3. 作用域插槽
src/App.vue
:
<template><div class="container"><Category title="游戏" ><template scope="jojo"><ul><li v-for="(g,index) in jojo.games" :key="index">{{g}}</li></ul></template></Category><Category title="游戏" ><template scope="jojo"><ol><li v-for="(g,index) in jojo.games" :key="index">{{g}}</li></ol></template></Category><Category title="游戏" ><template scope="jojo"><h4 v-for="(g,index) in jojo.games" :key="index">{{g}}</h4></template></Category></div>
</template><script>import Category from './components/Category'export default {name:'App',components:{Category}}
</script><style>.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}
</style>
src/components/Category.vue
:
<template><div class="category"><h3>{{title}}分类</h3><!-- 定义一个插槽(挖个坑,等着组件的使用者进行填充) --><slot :games="games">我是一些默认值,当使用者没有传递具体结构时,我会出现1</slot></div>
</template><script>export default {name:'Category',props:['title'],data() {return {games:['植物大战僵尸','红色警戒','空洞骑士','王国']}},}
</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
</style>
效果:
总结:
插槽:
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于==父组件 > 子组件
分类:默认插槽、具名插槽、作用域插槽
使用方式:
- 默认插槽:
父组件中:<Category><div>html结构1</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">插槽默认内容...</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>
5. Vuex
5.1. 理解Vuex
5.1.1. Vuex是什么
1. 概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
2. Vuex Github地址
5.1.2. 什么时候使用Vuex
- 多个组件依赖于同一状态
- 来自不同组件的行为需要变更同一状态
5.1.3. Vuex工作原理图
5.2. 求和案例
下载
vuex
:npm i vuex
5.2.1. 使用纯vue编写
src/App.vue
:
<template><div class="container"><Count/></div>
</template><script>import Count from './components/Count'export default {name:'App',components:{Count}}
</script>
src/components/Count.vue
:
<template><div><h1>当前求和为:{{sum}}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>export default {name:'Count',data() {return {n:1, //用户选择的数字sum:0 //当前的和}},methods: {increment(){this.sum += this.n},decrement(){this.sum -= this.n},incrementOdd(){if(this.sum % 2){this.sum += this.n}},incrementWait(){setTimeout(()=>{this.sum += this.n},500)},},}
</script><style>button{margin-left: 5px;}
</style>
效果:
5.2.2. 搭建Vuex环境
下载 Vuex:
npm i vuex
创建
src/store/index.js
:
"vue": "^2.5.2", "vue-router": "^3.5.3", "vuex": "^3.0.1"高版本的vuex可能不适配2.6.0以下的vue版本
//引入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
})
在
src/main.js
中创建 vm 时传入store
配置项:import Vue from 'vue' import App from './App.vue' import Vuex from 'vuex' import store from './store'Vue.config.productionTip = falseVue.use(Vuex)new Vue({el:"#app",render: h => h(App),store //注意这里的要写成store,其他比如vuex不行。 })
5.2.3. 使用Vuex编写
src/components/Count.vue
:
<template><div><h1>当前求和为:{{$store.state.sum}}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {increment(){this.$store.commit('ADD',this.n)},decrement(){this.$store.commit('SUBTRACT',this.n)},incrementOdd(){this.$store.dispatch('addOdd',this.n)},incrementWait(){this.$store.dispatch('addWait',this.n)},},}
</script><style>button{margin-left: 5px;}
</style>
src/store/index.js
:
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//准备actions对象——响应组件中用户的动作
const actions = {addOdd(context,value){console.log("actions中的addOdd被调用了")if(context.state.sum % 2){context.commit('ADD',value)}},addWait(context,value){console.log("actions中的addWait被调用了")setTimeout(()=>{context.commit('ADD',value)},500)},
}
//准备mutations对象——修改state中的数据
const mutations = {ADD(state,value){state.sum += value},SUBTRACT(state,value){state.sum -= value}
}
//准备state对象——保存具体的数据
const state = {sum:0 //当前的和
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state
})
总结:
Vuex的基本使用:
初始化数据
state
,配置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
5.3. getters配置项
src/Count.vue
:
<template><div><h1>当前求和为:{{$store.state.sum}}</h1><h3>当前求和的10倍为:{{$store.getters.bigSum}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {increment(){this.$store.commit('ADD',this.n)},decrement(){this.$store.commit('SUBTRACT',this.n)},incrementOdd(){this.$store.dispatch('addOdd',this.n)},incrementWait(){this.$store.dispatch('addWait',this.n)},},}
</script><style>button{margin-left: 5px;}
</style>
src/store/index.js
:
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//准备actions对象——响应组件中用户的动作
const actions = {addOdd(context,value){console.log("actions中的addOdd被调用了")if(context.state.sum % 2){context.commit('ADD',value)}},addWait(context,value){console.log("actions中的addWait被调用了")setTimeout(()=>{context.commit('ADD',value)},500)},
}
//准备mutations对象——修改state中的数据
const mutations = {ADD(state,value){state.sum += value},SUBTRACT(state,value){state.sum -= value}
}
//准备state对象——保存具体的数据
const state = {sum:0 //当前的和
}
//准备getters对象——用于将state中的数据进行加工
const getters = {bigSum(){return state.sum * 10}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})
效果:
总结:
getters
配置项的使用:
概念:当
state
中的数据需要经过加工后再使用时,可以使用getters
加工在
store.js
中追加getters
配置... const getters = {bigSum(state){return state.sum * 10} }//创建并暴露store export default new Vuex.Store({...getters })
组件中读取数据:
$store.getters.bigSum
5.4. 四个map方法的使用
5.4.1. mapState与mapGetters
src/store/index.js
:
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//准备actions对象——响应组件中用户的动作
const actions = {addOdd(context,value){console.log("actions中的addOdd被调用了")if(context.state.sum % 2){context.commit('ADD',value)}},addWait(context,value){console.log("actions中的addWait被调用了")setTimeout(()=>{context.commit('ADD',value)},500)},
}
//准备mutations对象——修改state中的数据
const mutations = {ADD(state,value){state.sum += value},SUBTRACT(state,value){state.sum -= value}
}
//准备state对象——保存具体的数据
const state = {sum:0, //当前的和name:'JOJO',school:'尚硅谷',
}
//准备getters对象——用于将state中的数据进行加工
const getters = {bigSum(){return state.sum * 10}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})
src/components/Count.vue
:
<template><div><h1>当前求和为:{{sum}}</h1><h3>当前求和的10倍为:{{bigSum}}</h3><h3>我是{{name}},我在{{school}}学习</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>import {mapState,mapGetters} from 'vuex'export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {increment(){this.$store.commit('ADD',this.n)},decrement(){this.$store.commit('SUBTRACT',this.n)},incrementOdd(){this.$store.dispatch('addOdd',this.n)},incrementWait(){this.$store.dispatch('addWait',this.n)},},computed:{ // 借助mapState生成计算属性(数组写法)// ...mapState(['sum','school','name']),// 借助mapState生成计算属性(对象写法)...mapState({sum:'sum',school:'school',name:'name'}),...mapGetters(['bigSum'])}}
</script><style>button{margin-left: 5px;}
</style>
效果:
总结:
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']) },
5.4.2. mapActions与mapMutations
src/components/Count.vue
:
<template><div><h1>当前求和为:{{sum}}</h1><h3>当前求和的10倍为:{{bigSum}}</h3><h3>我是{{name}},我在{{school}}学习</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {// 借助mapActions生成:increment、decrement(对象形式)...mapMutations({increment:'ADD',decrement:'SUBTRACT'}),// 借助mapActions生成:incrementOdd、incrementWait(对象形式)...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})},computed:{ // 借助mapState生成计算属性(数组写法)// ...mapState(['sum','school','name']),// 借助mapState生成计算属性(对象写法)...mapState({sum:'sum',school:'school',name:'name'}),...mapGetters(['bigSum'])}}
</script><style>button{margin-left: 5px;}
</style>
总结:
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
使用时,若需要传递参数,则需要在模板中绑定事件时传递好参数,否则参数是事件对象5.5. 多组件共享数据
src/App.vue
:
<template><div class="container"><Count/><hr/><Person/></div>
</template><script>import Count from './components/Count'import Person from './components/Person'export default {name:'App',components:{Count,Person}}
</script>
src/store/index.js
:
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)//准备actions对象——响应组件中用户的动作
const actions = {addOdd(context,value){console.log("actions中的addOdd被调用了")if(context.state.sum % 2){context.commit('ADD',value)}},addWait(context,value){console.log("actions中的addWait被调用了")setTimeout(()=>{context.commit('ADD',value)},500)},
}
//准备mutations对象——修改state中的数据
const mutations = {ADD(state,value){state.sum += value},SUBTRACT(state,value){state.sum -= value},ADD_PERSON(state,value){console.log('mutations中的ADD_PERSON被调用了')state.personList.unshift(value)}
}
//准备state对象——保存具体的数据
const state = {sum:0, //当前的和name:'JOJO',school:'尚硅谷',personList:[{id:'001',name:'JOJO'}]
}
//准备getters对象——用于将state中的数据进行加工
const getters = {bigSum(){return state.sum * 10}
}//创建并暴露store
export default new Vuex.Store({actions,mutations,state,getters
})
src/components/Count.vue
:
<template><div><h1>当前求和为:{{sum}}</h1><h3>当前求和的10倍为:{{bigSum}}</h3><h3>我是{{name}},我在{{school}}学习</h3><h3 style="color:red">Person组件的总人数是:{{personList.length}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {...mapMutations({increment:'ADD',decrement:'SUBTRACT'}),...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})},computed:{...mapState(['sum','school','name','personList']),,...mapGetters(['bigSum'])}}
</script><style>button{margin-left: 5px;}
</style>
src/components/Person.vue
:
<template><div><h1>人员列表</h1><h3 style="color:red">Count组件求和为:{{sum}}</h3><input type="text" placeholder="请输入名字" v-model="name"><button @click="add">添加</button><ul><li v-for="p in personList" :key="p.id">{{p.name}}</li></ul></div>
</template><script>import {nanoid} from 'nanoid'export default {name:'Person',data() {return {name:''}},computed:{personList(){return this.$store.state.personList},sum(){return this.$store.state.sum}},methods: {add(){const personObj = {id:nanoid(),name:this.name}this.$store.commit('ADD_PERSON',personObj)this.name = ''}}}
</script>
效果:
5.6. 模块化+命名空间
src/store/index.js
:
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引入count
import countOptions from './count'
//引入person
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)//创建并暴露store
export default new Vuex.Store({modules:{countAbout:countOptions,personAbout:personOptions,}
})
src/store/count.js
:
export default{namespaced:true,actions:{addOdd(context,value){console.log("actions中的addOdd被调用了")if(context.state.sum % 2){context.commit('ADD',value)}},addWait(context,value){console.log("actions中的addWait被调用了")setTimeout(()=>{context.commit('ADD',value)},500)}},mutations:{ADD(state,value){state.sum += value},SUBTRACT(state,value){state.sum -= value}},state:{sum:0, //当前的和name:'JOJO',school:'尚硅谷',},getters:{bigSum(state){return state.sum * 10}}
}
src/store/person.js
:
import axios from "axios"
import { nanoid } from "nanoid"export default{namespaced:true,actions:{addPersonWang(context,value){if(value.name.indexOf('王') === 0){context.commit('ADD_PERSON',value)}else{alert('添加的人必须姓王!')}},addPersonServer(context){axios.get('http://api.uixsj.cn/hitokoto/get?type=social').then(response => {context.commit('ADD_PERSON',{id:nanoid(),name:response.data})},error => {alert(error.message)})}},mutations:{ADD_PERSON(state,value){console.log('mutations中的ADD_PERSON被调用了')state.personList.unshift(value)}},state:{personList:[{id:'001',name:'JOJO'}]},getters:{firstPersonName(state){return state.personList[0].name}}
}
src/components/Count.vue
:
<template><div><h1>当前求和为:{{sum}}</h1><h3>当前求和的10倍为:{{bigSum}}</h3><h3>我是{{name}},我在{{school}}学习</h3><h3 style="color:red">Person组件的总人数是:{{personList.length}}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default {name:'Count',data() {return {n:1, //用户选择的数字}},methods: {...mapMutations('countAbout',{increment:'ADD',decrement:'SUBTRACT'}),...mapActions('countAbout',{incrementOdd:'addOdd',incrementWait:'addWait'})},computed:{...mapState('countAbout',['sum','school','name']),...mapGetters('countAbout',['bigSum']),...mapState('personAbout',['personList'])}}
</script><style>button{margin-left: 5px;}
</style>
src/components/Person.vue
:
<template><div><h1>人员列表</h1><h3 style="color:red">Count组件求和为:{{sum}}</h3><h3>列表中第一个人的名字是:{{firstPersonName}}</h3><input type="text" placeholder="请输入名字" v-model="name"><button @click="add">添加</button><button @click="addWang">添加一个姓王的人</button><button @click="addPerson">随机添加一个人</button><ul><li v-for="p in personList" :key="p.id">{{p.name}}</li></ul></div>
</template><script>import {nanoid} from 'nanoid'export default {name:'Person',data() {return {name:''}},computed:{personList(){return this.$store.state.personAbout.personList},sum(){return this.$store.state.countAbout.sum},firstPersonName(){return this.$store.getters['personAbout/firstPersonName']}},methods: {add(){const personObj = {id:nanoid(),name:this.name}this.$store.commit('personAbout/ADD_PERSON',personObj)this.name = ''},addWang(){const personObj = {id:nanoid(),name:this.name}this.$store.dispatch('personAbout/addPersonWang',personObj)this.name = '' },addPerson(){this.$store.dispatch('personAbout/addPersonServer')}},}
</script>
效果:
总结:
模块化+命名空间:
目的:让代码更好维护,让多种数据分类更加明确
修改
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'}),
6. Vue Router路由管理器
6.1 相关理解
6.1.1 vue-router的理解
- vue 的一个插件库,专门用来实现SPA 应用
6.1.2 对SPA应用的理解
- 单页 Web 应用(single page web application,SPA)
- 整个应用只有一个完整的页面
- 点击页面中的导航链接不会刷新页面,只会做页面的局部更新
- 数据需要通过ajax请求获取
#### 6.1.3 路由的理解
什么是路由?
- 一个路由就是一组映射关系(key - value)
- key 为路径,value 可能是 function 或 componen
路由分类
- 后端路由:
- 理解:value 是 function,用于处理客户端提交的请求
- 工作过程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据
- 前端路由:
- 理解:value 是 component,用于展示页面内容
- 工作过程:==当浏览器的路径改变时,对应的组件就会显示
==
- 后端路由:
6.2 基本路由
下载
vue-router
:npm i vue-router
src/router/index.js
:
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../components/Home'
import About from '../components/About'//创建并暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]
})
src/main.js
:
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'Vue.config.productionTip = false
Vue.use(VueRouter)new Vue({el:"#app",render: h => h(App),router
})
src/App.vue
:
<template><div><div class="row"><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2></div></div></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- 原始html中我们使用a标签实现页面跳转 --><!-- <a class="list-group-item active" href="./about.html">About</a><a class="list-group-item" href="./home.html">Home</a> --><!-- Vue中借助router-link标签实现路由的切换 --><router-link class="list-group-item" active-class="active" to="/about"> About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div></div></div></div></div>
</template><script>export default {name:'App',}
</script>
src/components/Home.vue
:
<template><h2>我是Home组件的内容</h2>
</template><script>export default {name:'Home'}
</script>
src/components/About.vue
:
<template><h2>我是About组件的内容</h2>
</template><script>export default {name:'About'}
</script>
总结:
安装
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
可配置高亮样式):<router-link active-class="active" to="/about">About</router-link>
指定展示位:
<router-view></router-view>
6.3. 几个注意事项
路由组件通常存放在
pages
文件夹,一般组件通常存放在components
文件夹比如上一节的案例就可以修改为:
src/pages/Home.vue
:<template><h2>我是Home组件的内容</h2> </template><script>export default {name:'Home'} </script>
src/pages/About.vue
:
<template><h2>我是About组件的内容</h2>
</template><script>export default {name:'About'}
</script>
src/router/index.js
:
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'//创建并暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home}]
})
src/components/Banner.vue
:
<template><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2></div></div>
</template><script>export default {name:'Banner'}
</script>
src/App.vue
:
<template><div><div class="row"><Banner/></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- 原始html中我们使用a标签实现页面跳转 --><!-- <a class="list-group-item active" href="./about.html">About</a><a class="list-group-item" href="./home.html">Home</a> --><!-- Vue中借助router-link标签实现路由的切换 --><router-link class="list-group-item" active-class="active" to="/about">About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div></div></div></div></div>
</template><script>import Banner from './components/Banner.vue'export default {name:'App',components:{Banner}}
</script>
通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载
每个组件都有自己的
$route
属性,里面存储着自己的路由信息整个应用只有一个router,可以通过组件的
$router
属性获取到
6.4. 多级路由/嵌套路由
src/pages/Home.vue
:
<template><div><h2>Home组件内容</h2><div><ul class="nav nav-tabs"><li><router-link class="list-group-item" active-class="active" to="/home/news"> News</router-link></li><li><router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link></li></ul><router-view></router-view></div></div>
</template><script>export default {name:'Home'}
</script>
src/pages/News.vue
:
<template><ul><li>news001</li><li>news002</li><li>news003</li></ul>
</template><script>export default {name:'News'}
</script>
src/pages/Message.vue
:
<template><ul><li><a href="/message1">message001</a> </li><li><a href="/message2">message002</a> </li><li><a href="/message/3">message003</a> </li></ul>
</template><script>export default {name:'News'}
</script>
src/router/index.js
:
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'//创建并暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{path:'message',component:Message}]}]
})
效果:
总结:
配置路由规则,使用children配置项:
routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[ //通过children配置子级路由{path:'news', //此处一定不要写:/newscomponent:News},{path:'message', //此处一定不要写:/message//注意,以 / 开头的嵌套路径将被视为根路径。//这允许你利用组件嵌套,而不必使用嵌套的 URLcomponent:Message}]} ]
//注意路由的层级,嵌套路由,只有给父路由配置了children属性,且子路由写在children里,父路由里的router-view才会显示children配置的子路由。
决定children路由是否显示,看是否在父组件配置了router-view,且chilren只会在父组件里的router-view显示,不会在App的router-view里显示。
如下:
最终Layout和dashboard都显示了,不过他们在的router-view不同
{path: '/dashboard',component: Layout,redirect: '/dashboard',name: '首页',children: [{path: '/dashboard',component: dashboard,meta: {keepAlive: true,},},]}
- 跳转(要写完整路径):
<router-link to="/home/news">News</router-link>
6.5. 路由的query参数
src/router.index.js
:
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//创建并暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{path:'message',component:Message,children:[{path:'detail',component:Detail}]}]}]
})
src/pages/Detail.vue
:
<template><ul><li>消息编号:{{$route.query.id}}</li><li>消息标题:{{$route.query.title}}</li></ul>
</template><script>export default {name:'Detail'}
</script>
src/pages/Message.vue
:
<template><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳转路由并携带query参数,to的字符串写法 --><!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> --><!-- 跳转路由并携带query参数,to的对象写法 --><router-link :to="{path:'/home/message/detail',query:{id:m.id,title:m.title}}">{{m.title}}</router-link> </li></ul><hr/><router-view></router-view></div>
</template><script>export default {name:'News',data(){return{messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}]}}}
</script>
效果:
总结:
传递参数:
<!-- 跳转并携带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>
接收参数:
$route.query.id $route.query.title
6.6. 命名路由
src/router/index.js
:
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//创建并暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{path:'message',component:Message,children:[{//name配置项为路由命名name:'xiangqing',path:'detail',component:Detail}]}]}]
})
src/pages/Message.vue
:
<template><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳转路由并携带query参数,to的字符串写法 --><!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> --><!-- 跳转路由并携带query参数,to的对象写法 --><router-link :to="{//使用name进行跳转name:'xiangqing',query:{id:m.id,title:m.title}}">{{m.title}}</router-link> </li></ul><hr/><router-view></router-view></div>
</template><script>export default {name:'News',data(){return{messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}]}}}
</script>
总结:
命名路由:
作用:可以简化路由的跳转
如何使用:
给路由命名:
{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>
6.7. 路由的params参数
src/router/index.js
:
params 传参后,刷新页面会失去拿到的参数。所以路由参数要修改为 '/login/:username'(官方称为动态路由或者参数暂位符)但是这样就会类似于 post 请求,他会把接收到的参数替换作为地址。假如传入参数为:params: { username: ‘admin’},那么最终访问的地址为:http://localhost:8080/home/admin
下面这种做法
不要用
!(name匹配路由 + query传参+定位为动态路由(使用占位符))
编程式路由导航中,如果使用了name匹配路由 + query传参的方式,定义路由时候`不要写`占位符。
如下四个图,因为query中的参数是不会替换作为地址的!!!
如果写了占位符,那么由于占位符无法正确解析,会导致路由中的path变为/,所以一刷新页面会跳转路由到/所在路由。
name匹配不是params的特权,name也可以搭配query使用;占位符不是只能在使用name时候使用,使用path也可以使用占位符。但是使用path时候占位符所匹配的内容会作为route的parmas的属性而不是route的parmas的属性而不是route的parmas的属性而不是route的query的属性。
使用name + query 会导致刷新页面丢失。使用path+ 占位符也有刷新页面丢失问题。
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//创建并暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{path:'message',component:Message,children:[{name:'xiangqing',path:'detail/:id/:title',//使用占位符声明接收params参数.使用params传参时候,没有要求必须使用占位符。使用了占位符如果继续使用path,要写完整的带有参数的path。//如果不使用占位符,页面跳转时参数不会在地址栏中显示。不使用占位符但是会导致一个问题,就是刷新一下浏览器会导致params参数丢失,比如刷新一下浏览器重新加载了detail这个路径,明显这是有问题的。`(使用了parmas传参时候一般使用路由的name属性,因为如果提供了path,params 会被忽略。//或者不使用params字段,直接手写完整的带有参数的 path,比如:router.push({ path: `/user/${username}` }) // -> /user/eduardo)component:Detail}]}]}]
})
src/pages/Message.vue
:
<template><div><ul><li v-for="m in messageList" :key="m.id"><!-- 跳转路由并携带params参数,to的字符串写法 --><!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> --><!-- 跳转路由并携带params参数,to的对象写法 --><router-link :to="{name:'xiangqing',params:{id:m.id,title:m.title}}">{{m.title}}</router-link> </li></ul><hr/><router-view></router-view></div>
</template><script>export default {name:'News',data(){return{messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}]}}}
</script>
src/pages/Detail.vue
:
<template><ul><li>消息编号:{{$route.params.id}}</li><li>消息标题:{{$route.params.title}}</li></ul>
</template><script>export default {name:'Detail'}
</script>
总结:
配置路由,声明接收
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>
特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path配置项,必须使用name配置!
接收参数:
$route.params.id $route.params.title
6.8. 路由的props配置
src/pages/Message.vue
:
<template><div><ul><li v-for="m in messageList" :key="m.id"><router-link :to="{name:'xiangqing',params:{id:m.id,title:m.title}}">{{m.title}}</router-link> </li></ul><hr/><router-view></router-view></div>
</template><script>export default {name:'News',data(){return{messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}]}}}
</script>
src/router/index.js
:
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//创建并暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{path:'message',component:Message,children:[{name:'xiangqing',path:'detail/:id/:title',component:Detail,//props的第一种写法,值为对象,该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:'hello'}//props的第二种写法,值为布尔值,若布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传给Detail组件。// props:true//props的第三种写法,值为函数,双解构赋值props({params :{title}})props($route){return {id:$route.params.id,title:$route.params.title,}}}]}]}]
})
src/pages/Detail.vue
:
<template><ul><li>消息编号:{{id}}</li><li>消息标题:{{title}}</li></ul>
</template><script>export default {name:'Detail',props:['id','title']}
</script>
总结:
作用:让路由组件更方便的收到参数
{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}} }
6.9. 路由跳转的replace方法
src/pages/Home.vue
:
<template><div><h2>Home组件内容</h2><div><ul class="nav nav-tabs"><li><router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link></li><li><router-link replace class="list-group-item" active-class="active" to="/home/message">Message</router-link></li></ul><router-view></router-view></div></div>
</template><script>export default {name:'Home'}
</script>
总结:
- 作用:控制路由跳转时操作浏览器历史记录的模式
- 浏览器的历史记录有两种写入方式:
push
和replace
,其中push
是追加历史记录,replace
是替换当前记录。路由跳转时候默认为push
方式 - 开启
replace
模式:<router-link replace ...>News</router-link>
6.10编程式路由导航
src/components/Banner.vue
:
<template><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo</h2><button @click="back">后退</button><button @click="forward">前进</button><button @click="test">测试一下go</button></div></div>
</template><script>export default {name:'Banner',methods:{back(){this.$router.back()},forward(){this.$router.forward()},test(){this.$router.go(3)}},}
</script>
src/pages/Message.vue
:
<template><div><ul><li v-for="m in messageList" :key="m.id"><router-link :to="{name:'xiangqing',params:{id:m.id,title:m.title}}">{{m.title}}</router-link><button @click="showPush(m)">push查看</button><button @click="showReplace(m)">replace查看</button></li></ul><hr/><router-view></router-view></div>
</template><script>export default {name:'News',data(){return{messageList:[{id:'001',title:'消息001'},{id:'002',title:'消息002'},{id:'003',title:'消息003'}]}},methods:{showPush(m){this.$router.push({name:'xiangqing',query:{id:m.id,title:m.title}})},showReplace(m){this.$router.replace({name:'xiangqing',query:{id:m.id,title:m.title}})}}}
</script>
src/router/index.js
:
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//创建并暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{path:'message',component:Message,children:[{name:'xiangqing',path:'detail',component:Detail,props($route){return {id:$route.query.id,title:$route.query.title,}}}]}]}]
})
src/pages/Detail.vue
:
<template><ul><li>消息编号:{{id}}</li><li>消息标题:{{title}}</li></ul>
</template><script>export default {name:'Detail',props:['id','title']}
</script>
效果:
总结:
作用:不借助
<router-link>
实现路由跳转,让路由跳转更加灵活具体编码:
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() //可前进也可后退
6.10.1 导航到不同的位置
注意:在 Vue 实例中,你可以通过 $router
访问路由实例。因此你可以调用 this.$router.push
。
想要导航到不同的 URL,可以使用 router.push
方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。
当你点击 <router-link>
时,内部会调用这个方法,所以点击 <router-link :to="...">
相当于调用 router.push(...)
:
声明式 | 编程式 |
---|---|
<router-link :to="...">
|
router.push(...)
|
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
// 字符串路径
router.push('/users/eduardo')// 带有路径的对象
router.push({ path: '/users/eduardo' })// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })
注意:如果提供了 path
,params
会被忽略,上述例子中的 query
并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name
或手写完整的带有参数的 path
:
const username = 'eduardo'
// 我们可以手动建立 url,但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话,使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user
由于属性 to
与 router.push
接受的对象种类相同,所以两者的规则完全相同。
router.push
和所有其他导航方法都会返回一个 Promise,让我们可以等到导航完成后才知道是成功还是失败。我们将在 Navigation Handling 中详细介绍。
6.10.2 替换当前位置
它的作用类似于 router.push
,唯一不同的是,它在导航时不会向 history 添加新记录,正如它的名字所暗示的那样——它取代了当前的条目。
声明式 | 编程式 |
---|---|
<router-link :to="..." replace>
|
router.replace(...)
|
也可以直接在传递给 router.push
的 routeLocation
中增加一个属性 replace: true
:
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })
6.11. 缓存路由组件
见官网的编程式路由导航,除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
通过 this.router.push(‘/created?cityCode=router.push(`/created?cityCode=router.push(‘/created?cityCode={this.radio}`); 也就是说参数在URI里的话,参数是被放到router的query上的
src/pages/News.vue
:
<template><ul><li>news001 <input type="text"></li><li>news002 <input type="text"></li><li>news003 <input type="text"></li></ul>
</template><script>export default {name:'News'}
</script>
src/pages/Home.vue
:
<template><div><h2>Home组件内容</h2><div><ul class="nav nav-tabs"><li><router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link></li><li><router-link replace class="list-group-item" active-class="active" to="/home/message">Message</router-link></li></ul><keep-alive include="News"><router-view></router-view></keep-alive></div></div>
</template><script>export default {name:'Home'}
</script>
效果:
总结:
- 作用:让不展示的路由组件保持挂载,不被销毁
- 具体编码:
//缓存一个路由组件
<keep-alive include="News"> //include中写想要缓存的组件名,不写表示全部缓存<router-view></router-view>
</keep-alive>//缓存多个路由组件
<keep-alive :include="['News','Message']"> <router-view></router-view>
</keep-alive>
6.12. activated和deactivated
src/pages/News.vue
:
<template><ul><li :style="{opacity}">欢迎学习vue</li><li>news001 <input type="text"></li><li>news002 <input type="text"></li><li>news003 <input type="text"></li></ul>
</template><script>export default {name:'News',data(){return{opacity:1}},activated(){console.log('News组件被激活了')this.timer = setInterval(() => {this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1},16)},deactivated(){console.log('News组件失活了')clearInterval(this.timer)}}
</script>
效果:
总结:
activated
和deactivated
是路由组件所独有的两个钩子,用于捕获路由组件的激活状态- 具体使用:
activated
路由组件被激活时触发deactivated
路由组件失活时触发
6.13. 路由守卫
6.13.1. 全局路由守卫
src/router/index.js
:
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//创建一个路由器
const router = new VueRouter({routes:[{name:'guanyv',path:'/about',component:About,meta:{title:'关于'}},{name:'zhuye',path:'/home',component:Home,meta:{title:'主页'},children:[{name:'xinwen',path:'news',component:News,meta:{isAuth:true,title:'新闻'}},{name:'xiaoxi',path:'message',component:Message,meta:{isAuth:true,title:'消息'},children:[{name:'xiangqing',path:'detail',component:Detail,meta:{isAuth:true,title:'详情'},props($route){return {id:$route.query.id,title:$route.query.title,}}}]}]}]
})//全局前置路由守卫————初始化的时候、每次路由切换之前被调用
router.beforeEach((to,from,next) => {console.log('前置路由守卫',to,from)if(to.meta.isAuth){if(localStorage.getItem('school')==='atguigu'){next()}else{alert('学校名不对,无权限查看!')}}else{next()}
})//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{console.log('后置路由守卫',to,from)document.title = to.meta.title || '硅谷系统'
})//导出路由器
export default router
6.13.2. 独享路由守卫
src/router/index.js
:
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'//创建一个路由器
const router = new VueRouter({routes:[{name:'guanyv',path:'/about',component:About,meta:{title:'关于'}},{name:'zhuye',path:'/home',component:Home,meta:{title:'主页'},children:[{name:'xinwen',path:'news',component:News,meta:{title:'新闻'},//独享守卫,特定路由切换之后被调用beforeEnter(to,from,next){console.log('独享路由守卫',to,from)if(localStorage.getItem('school') === 'atguigu'){next()}else{alert('暂无权限查看')}}},{name:'xiaoxi',path:'message',component:Message,meta:{title:'消息'},children:[{name:'xiangqing',path:'detail',component:Detail,meta:{title:'详情'},props($route){return {id:$route.query.id,title:$route.query.title,}}}]}]}]
})//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{console.log('后置路由守卫',to,from)document.title = to.meta.title || '硅谷系统'
})//导出路由器
export default router
6.13.3. 组件内路由守卫
src/pages/About.vue
:
<template><h2>我是About组件的内容</h2>
</template><script>export default {name:'About',//通过路由规则,离开该组件时被调用beforeRouteEnter (to, from, next) {console.log('About--beforeRouteEnter',to,from)if(localStorage.getItem('school')==='atguigu'){next()}else{alert('学校名不对,无权限查看!')}},//通过路由规则,离开该组件时被调用beforeRouteLeave (to, from, next) {console.log('About--beforeRouteLeave',to,from)next()} "vue": "^2.5.2",
------------------------------------最新路由写法----------------------------------------"vue": "^3.2.13",//不用手动调用next(),但是next函数还在.beforeRouteEnter(to, from) {// 在渲染该组件的对应路由被验证前调用// 不能获取组件实例 `this` !// 因为当守卫执行时,组件实例还没被创建!},beforeRouteUpdate(to, from) {// 在当前路由改变,但是该组件被复用时调用// 举例来说,对于一个带有动态参数的路径 `/users/:id`,在 `/users/1` 和 `/users/2` 之间跳转的时候,// 由于会渲染同样的 `UserDetails` 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 因为在这种情况发生的时候,组件已经挂载好了,导航守卫可以访问组件实例 `this`},beforeRouteLeave(to, from) {// 在导航离开渲染该组件的对应路由时调用// 与 `beforeRouteUpdate` 一样,它可以访问组件实例 `this`},}
</script>
总结:
作用:对路由进行权限控制
分类:全局守卫、独享守卫、组件内守卫
全局守卫:
//全局前置守卫:初始化时执行、每次路由切换前执行 router.beforeEach((to,from,next)=>{console.log('beforeEach',to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则next() //放行}else{alert('暂无权限查看')}}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(localStorage.getItem('school') === 'atguigu'){next()}else{alert('暂无权限查看')} }
组件内守卫:
//进入守卫:通过路由规则,进入该组件时被调用 beforeRouteEnter (to, from, next) {...}, //离开守卫:通过路由规则,离开该组件时被调用 beforeRouteLeave (to, from, next) {...},
6.14. 路由器的两种工作模式
- 对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值
- hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器
- hash模式:
- 地址中永远带着#号,不美观
- 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法
- 兼容性较好
- history模式:
- 地址干净,美观
- 兼容性和hash模式相比略差
- 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题
7. Vue UI组件库
7.1 常用UI组件库
7.1.1 移动端常用UI组件库
- Vant
- Cube UI
- Mint UI
7.1.2. PC端常用UI组件库
- Element UI
- IView UI
7.2. element-ui基本使用
- 安装 element-ui:
npm i element-ui -S
src/main.js
:
import Vue from 'vue'
import App from './App.vue'
//引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';Vue.config.productionTip = false
//使用ElementUI
Vue.use(ElementUI)new Vue({el:"#app",render: h => h(App),
})
src/App.vue
:
<template><div><br><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row></div>
</template><script>export default {name:'App',}
</script>
效果:
7.3. element-ui按需引入
安装 babel-plugin-component:
npm install babel-plugin-component -D
修改
babel-config-js
:module.exports = {presets: ['@vue/cli-plugin-babel/preset',["@babel/preset-env", { "modules": false }]],plugins: [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]] }
src/main.js
:
import Vue from 'vue'
import App from './App.vue'
//按需引入
import { Button,Row } from 'element-ui'Vue.config.productionTip = falseVue.component(Button.name, Button);
Vue.component(Row.name, Row);
/* 或写为* Vue.use(Button)* Vue.use(Row)*/new Vue({el:"#app",render: h => h(App),
})
Vue笔记(天禹)后四章相关推荐
- 李弘毅机器学习笔记:第十四章—Why deep?
李弘毅机器学习笔记:第十四章-Why deep? 问题1:越深越好? 问题2:矮胖结构 v.s. 高瘦结构 引入模块化 深度学习 使用语音识别举例 语音辨识: 传统的实现方法:HMM-GMM 深度学习 ...
- C语言数据结构(大话数据结构——笔记2)第四章:栈与队列
文章目录 第四章:栈与队列(115) 栈顶与栈底,空栈,后进先出 Last in first out(LIFO结构)(117) 进栈.压栈.入栈:栈的插入操作:出栈.弹栈:栈的删除操作(118) pu ...
- 软考网络管理员学习笔记4之第四章局域网技术
第四章.局域网技术 考点1.传输介质 [考法分析] 本考点的基本考法是关于双绞线.光纤的概念及使用场景 [要点分析] 1.双绞线的传输范围在100m内,一共有4对芯,其中1,2号芯用于发送数据,3,6 ...
- 【Java基础学习笔记】- Day11 - 第四章 引用类型用法总结
Java基础学习笔记 - Day11 - 第四章 引用类型用法总结 Java基础学习笔记 - Day11 - 第四章 引用类型用法总结 4.1 class作为成员变量 4.2 interface作为成 ...
- 《网络安全工程师笔记》 第十四章:渗透简单测试流程
注:本笔记来自温晓飞老师的网络安全课程 第十四章:渗透简单测试流程 第一章:虚拟化架构与系统部署 第二章:IP地址详解 第三章:进制转换 第四章:DOS基本命令与批处理 第五章:用户与组管理 第六章: ...
- 系统架构师学习笔记_第十四章_连载
第十四章 基于ODP的架构师实践 14.1 基于ODP的架构开发过程 系统架构 反映了功能在系统系统构件中的 分布.基础设施相关技术.架构设计模式 等,它包含了架构的 原则 和 方法.构件关系 与 ...
- 【王道笔记-操作系统】第四章 文件管理
文章目录 一.文件的概念 二.文件的操作 1.文件的创建和删除 2.文件的打开 3.常用的系统调用 三.目录结构 1.绝对路径与相对路径 2.文件控制块 3.几种目录结构 四.文件共享和文件保护 1. ...
- FreeRTOS笔记篇:第四章 -- 队列管理
目录 测试环境如下 概述 队列基本知识 多任务访问-读(多写单读) 阻塞任务读取队列数据 多任务访问-写 单队列使用 创建一个队列-xQueueCreate() 复位一个队列-xQueueReset( ...
- 计算机组成原理 — 后四章
文章目录 中央处理器 CPU的功能和组成 - 掌握 CPU的功能 CPU的基本组成 CPU中的主要寄存器 操作控制器与时序产生器 指令周期 - 掌握 指令周期的基本概念 用方框图语言表示指令周期 时序 ...
最新文章
- 在ubuntu 14.04 64bit下配置安装PyQt4(python2.7和python3.4)
- java 风袖,仓库 - 高谷深陵 (gaogushenling) - Gitee.com
- rate-limit
- Linux与JVM的内存关系分析
- 云上的精准医疗——公有云、私有云案例分析和比较
- 深度学习 占用gpu内存 使用率为0_深度学习的完整硬件指南
- C++进程数量的限制
- 利用JS实现复制/粘贴功能
- 使用双亲指针表示法存储一棵树,可以方便解决下列哪个应用问题( )
- SpringBootAdmin项目创建
- Spring Environment仅用于初始化代码
- 企业是否应该实现对客户需求的快速响应_如何做好企业服务?
- samba服务器新建文件权限,Ubuntu中安装samba服务器创建文件共享的方法及普通用户设置共享的问题解析...
- win 2008 R2 域服务器策略同步异常解决方案。
- Java Swing 开发总结汇总贴
- SOLIDWORKS如何实现放样折弯
- win10安装Geany编辑器
- [CodeForces757E]Bash Plays with Functions
- 解决NotImplementedError: Layer XX has arguments in `__init__` and therefore must override `get_config`
- 多线程对共享资源的访问