好用的html模板网站,某旅行社网站建设论文,php门户网站模板下载,有专业做网站的吗gre考Vue基础
Vue基本概念
Vue是什么
Vue是一个渐进式的JavaScript框架#xff0c;它基于标准 HTML、CSS 和 JavaScript 构建#xff0c;并提供了一套声明式的、组件化的编程模型#xff0c;帮助你高效地开发用户界面。
渐进式#xff1a;各个特性可以根据项目需要逐渐引入和…Vue基础
Vue基本概念
Vue是什么
Vue是一个渐进式的JavaScript框架它基于标准 HTML、CSS 和 JavaScript 构建并提供了一套声明式的、组件化的编程模型帮助你高效地开发用户界面。
渐进式各个特性可以根据项目需要逐渐引入和应用如Vue Router、Vuex框架高度封装拥有自己的规则和元素声明式Vue基于标准HTML拓展了一套模板语法使得我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系组件化将应用划分为多个独立、可复用的模块响应性Vue 会自动跟踪JavaScript状态并在其发生变化时响应式地更新DOM
vue/cli脚手架
vue/cli脚手架是什么
vue/cli是Vue官方提供的一个全局模块包用于创建脚手架项目它是一个自动化构建项目的工具帮助开发者快速搭建Vue.js项目的开发环境其具有开箱即用、无需配置webpack如babel支持、css和less支持、开发服务器支持等有点
vue/cli生成的文件夹目录结构及其作用 node_modules项目依赖的三方包 public静态资源文件 favicon.io浏览器小图标index.html单页面的HTML文件 src业务文件夹 assets静态资源components组件目录App.vue应用根组件main.js入口js文件 .gitignoregit提交忽略配置 babel.config.jsbabel配置 package.js项目依赖包列表 vue.config.jswebpack配置 yarn.lock项目包版本锁定和缓存地址
index.html、main.js 、App.vue的引用关系
引用关系index.html main.js App.vue
Vue指令基础
插值表达式
插值表达式 {{表达式}}也叫声明式渲染、文本插值。变量写在data里写在data的变量会被vue自动绑定this到当前组件
bind绑定
基础语法
bind绑定可以给标签绑定属性其写法为v-bind:属性名vue变量名简写为:属性名变量名
动态class
语法:class{ 类名: 布尔变量 }
templatediv :class{ redStr: bool }动态class值为true时可以作为类名生效{{ bool }}/div
/templatescript
export default {data() {return {bool: false,}},
}
/scriptstyle scoped
.redStr {color: red;
}
/style动态style
语法:stylecss属性名:值
templatediv :style{ color: colorStr }动态style对style的值进行赋值/div
/templatescript
export default {data() {return {colorStr: red,}},
}
/scriptv-on事件绑定
vue通过v-on给标签绑定事件其写法为v-on:事件名短代码/函数简写为事件名短代码/函数绑定的函数写在methods里或使用箭头函数
获取事件对象
无实参直接在事件处理函数中通过形参接收有实参通过$event实参指代事件对象传给事件处理函数
templatediv!-- 阻止默认事件-无实参 --a:hrefurlclickvuePreventDefaultbaidu/abr /!-- 阻止默认事件-有实参 --a:hrefurlclickvuePreventDefault2(1, $event)baidu2/a/div
/templatescript
export default {data() {return {url: https:\\www.baidu.com,}},methods: {// 阻止默认事件-无实参vuePreventDefault(e) {e.preventDefault()},// 阻止默认事件-有实参vuePreventDefault2(num, e) {console.log(num)e.preventDefault()},},
}
/scriptv-on修饰符
给事件添加常用的功能语法事件名.修饰符函数名常用修饰符有
.stop阻止冒泡.prevent阻止默认行为.once程序运行期间只触发一次事件处理函数按键修饰符 keyup.enter监测回车键keyup.esc监测返回键更多修饰符参考开发文档events介绍
template!-- 事件修饰符 --a:hrefurlclick.preventvuePreventTestbaidu/a
/templatescript
export default {data() {return {url: https:\\www.baidu.com,}},methods: {vuePreventTest() {console.log(超链接跳转失效了)},},
}
/scriptv-model双向绑定
通过v-model可以实现数据变量与表单数据的双向绑定其内部实现也是通过v-bind数据绑定和v-on事件绑定实现的相对于一个语法糖
templateinputtypetextv-modelvueModelchangeprint/
/templatescript
export default {data() {return {vueModel: 哈哈哈,}},methods: {print() {console.log(this.vueModel)},},
}
/script
复选框的情况
遇到复选款若v-model的值为非数组类型则关联的是复选框的checked属性为数组时关联的才是value值。
templatedivinputtypecheckboxv-modelhobbyvalue吃饭/吃饭inputtypecheckboxv-modelhobbyvalue睡觉/睡觉inputtypecheckboxv-modelhobbyvalue打豆豆/打豆豆/div
/templatescript
export default {data() {return {hobby: [], //必须是数组否则关联的是选中状态true/false}},
}
/scriptv-model修饰符
给v-model添加常用功能如类型转换、去除空白等
.number以parseFloat转换成数字类型.trim去除收费空白字符.lazy在change时失去焦点触发而非input时触发
v-text和v-html
通过变量控制innerText和innerHtml
templatediv!-- 按innerText --p v-textstr/p!-- 按innerHtml --p v-htmlstr/p/div
/templatescript
export default {data() {return {str: span我是一个span标签span/,}},
}
/scriptv-if和v-show
通过变量控制标签的显示和隐藏区别v-show采用display:none的方式控制隐藏和显示适合频繁切换而v-if直接将元素从DOM树添加和移除的方式控制显示和隐藏在频繁切换时效率低下。v-if可以搭配v-else-if和v-else使用
templatediv!-- v-show --div v-showage 18Enter/div!-- v-if --div v-ifage 60Ban/divdiv v-else-ifage 18Enter/divdiv v-elseBan/div/div
/templatescript
export default {data() {return {age: 25,}},
}
/scriptv-for
基本用法
v-for可以实现列表渲染所在标签结构会按照数据数量循环生成语法为v-for(值变量索引变量) in 目录结构 :key唯一值
templatediv!-- v-for列表渲染 --ulliv-for(item, index) in arr:keyitem{{ item:${item}; index${index} }}/li/ul/div
/templatescript
export default {data() {return {arr: [1, 2, 3, 4, 5, 6, 7],}},
}
/script数组更新检测
数组便跟方法改变数组导致v-for更新页面刷新非数组便跟方法返回新数组可以使用覆盖数组或this.$set()更新
templatediv!-- v-for列表渲染 --ulliv-for(item, index) in arr:keyitem{{ item:${item}; index${index} }}/li/ulbutton clickarr.push(1)push/button/div
/templatescript
export default {data() {return {arr: [1, 2, 3, 4, 5, 6, 7],}},
}
/script
v-for就地更新
虚拟DOM本质上时JS和DOM之间的应该映射在形态上表现为应该能够描述DOM结构及其属性信息的JS对象帮助我们在更爽更高效的研发模式下保证还有良好的性能。
当数据发生改变后会先在内存中创建新的虚拟DOM并与旧的虚拟DOM按一定规则进行比较然后决定是否复用真实DOM。
传统算法对树形结构的比较通过递归对树节点进行一一对比时间复杂度为O(n³)效率过于低下而diff算法时间复杂度为O(n)其关键是
分层对比因为DOM 节点之间的跨层级操作并不多同层级操作才是主流Diff 过程直接放弃了跨层级的节点比较它只针对相同层级的节点作对比只需要从上到下的一次遍历就可以完成对整棵树的对比以此降低复杂度量级。类型一致的节点才有进行Diff的必要性只有同类型的组件才有进一步对比的必要性通过key属性的设置尽可能复用同一层级内的节点通过识别key可能知道只是顺序发生了变化就可以只进行插入或删除操作大量降低成本
templatediv!-- v-for列表渲染 --ulliv-foritem in arr:keyitem{{ item:${item} }}/li/ul!-- 更新 --button clickarr.splice(2, 0, arr.length 1)insert/button/div
/templatescript
export default {data() {return {arr: [1, 2, 3, 4, 5, 6, 7],}},
}
/script这里可以看到控制台中只有插入的元素闪动了即只更新了插入部分
过滤器filter
过滤器是用来格式化数据的其就是一个函数传入值后返回处理过的值只能用在插值表达式和v-bind动态属性里
全局过滤器
定义过滤器
// main.js
import Vue from vue
import App from ./App.vueVue.config.productionTip false// 定义全局过滤器
Vue.filter(reverse, val val.split().reverse().join())new Vue({render: h h(App),
}).$mount(#app)使用过滤器
!-- xx.vue --
templatedivdiv{{ 过滤器的使用 msg }}/div!-- 使用翻转过滤器 --div{{ msg | reverse }}/div/div
/templatescript
export default {data() {return {msg: Hello World,}},
}
/script局部过滤器
!-- xx.vue --
templatedivdiv{{ 过滤器的使用 msg }}/div!-- 使用翻转过滤器 --div{{ msg | reverseLocal }}/div/div
/templatescript
export default {data() {return {msg: Hello World,}},// 定义局部过滤器filters: {reverseLocal: val val.split().reverse().join(),},
}
/script过滤器可以同时使用多个增加|隔开即可也可传递参数使用方法同函数
!-- xx.vue --
templatedivdiv{{ 过滤器的使用 msg }}/div!-- 使用多个过滤器并带有参数 --div{{ msg | toUp | reverseLocal(|) }}/div/div
/templatescript
export default {data() {return {msg: Hello World,}},// 定义多个过滤器并带有参数filters: {reverseLocal: (val, s) val.split().reverse().join(s),toUp: val val.toUpperCase(),},
}
/script计算属性computed
基本用法
一个变量的值依赖另外一些变量计算而来就是计算属性计算属性函数内的变量改变会重新返回新的计算结果并渲染页面
!-- xx.vue --
templatedivdiv{{ 计算属性ab: a b }}/div!-- 使用计算属性 --{{ addAB }}/div
/templatescript
export default {data() {return {a: 1,b: 2,}},// 定义计算属性computed: {addAB() {return this.a this.b},},
}
/script特性
计算属性带有缓存机制计算数学定义函数执行后会把return值缓存起来依赖项不点多次调用也是从缓存中取值当依赖项改变时才会自动重新执行并返回新的值
完整写法
在将计算属性直接通过v-model关联到input输入后发现会报错原因是无法直接通过v-model双向绑定修改计算属性的值这个时候时需要用到setter的完整写法
script
export default {computed: {computedName: {set(val) {// 设置值时触发的代码},get() {// 获取值时触发的代码},},},
}
/script侦听器watch
基本语法
侦听器可以侦听data/computed属性值的改变
script
export default {data() {return {// 被侦听的变量name: ,}},// 侦听器watch: {name(oldValue, newValue) {console.log(newValue, oldValue)},},
}
/script完整写法
基本语法通过函数实现但无法对复杂类型进行侦听也无法设置执行时机这个时候就要用到完整写法
!-- xx.vue --
templatediv姓inputtypetextv-modelname.lastName/名inputtypetextv-modelname.firstName//div
/templatescript
export default {data() {return {// 被侦听的变量name: {lastName: ,firstName: ,},}},// 侦听器watch: {name: {immediate: true, // 页面一打开就执行一次侦听deep: true, // 深度侦听handler(newValue, oldValue) {console.log(newValue)console.log(oldValue)},},},
}
/scriptVue组件
组件是可复用的Vue实例封装了标签、样式和JS代码把页面上可复用的部分封装为组件可以便捷的开发和维护项目。组件使用如下
创建组件xxx.vue封装标签、样式、js代码注册组件 全局注册在main.js中Vue.component(组件名, 组件对象)局部注册在某xx.vue文件中export default{components: {组件名: 组件对象 }} 引入并使用组件
组件样式scoped作用及其原理
scoped可以让CSS样式只在当前组件生效其作用原理是为组件添加机的哈希值data-v-hash值属性在获取标签时也会添加[data-v-hash]的属性选择器从而保证CSS类名只针对当前的组件生效
组件之间的通信
父传子——props
子组件内定义props接收数据父组件传递props到子组件实现
儿子
!-- MyProduct.vue --
templatediv classmy-product!-- 使用变量 --h3标题: {{ title }}/h3p价格: {{ price }}元/pp{{ intro }}/p/div
/templatescript
export default {// 定义变量准备接收props: [title, price, intro],
}
/script父亲
!-- app.vue --
templatediv idapp!-- 3.使用子组件 --Productv-for(product, index) in productList:keyproduct.id:titleproduct.name:priceproduct.price:introproduct.introindexindex//div
/templatescript
// 1.引入子组件
import Product from ./components/MyProductexport default {data() {return {productList: [{id: 1,name: 钵钵鸡,price: 1,intro: 一元一串的钵钵鸡,},{id: 2,name: 肯德基,price: 50,intro: Crazy星期四V我50,},{id: 3,name: 椰子鸡,price: 100,intro: 深圳特产海南椰子鸡,},],}},components: {// 2.注册子组件Product,},
}
/script**单向数据流**指的是数据从父组件流向子组件的过程这种单向数据流能保证数据易于追踪、减少组件之间的耦合度、提高性能。父传子的props是只读的不允许修改的。注意Vue可以不是单向数据流如eventBus兄弟之间通信通过中介实现所以Vue中的单向数据流特指的是直接的通信
子传父$emit
父组件定义自定义事件子组件提高$emit主动触发事件实现
父亲
!-- app.vue --
templatediv idapp!-- 父组件中给子组件绑定自定义事件——砍价函数 --Productv-for(product, index) in productList:keyproduct.id:titleproduct.name:priceproduct.price:introproduct.intro:indexindexsubPricesubPrice//div
/templatescript
import Product from ./components/MyProduct_subexport default {data() {return {productList: [{id: 1,name: 钵钵鸡,price: 1,intro: 一元一串的钵钵鸡,},{id: 2,name: 肯德基,price: 50,intro: Crazy星期四V我50,},{id: 3,name: 椰子鸡,price: 100,intro: 深圳特产海南椰子鸡,},],}},methods: {// 定义砍价函数subPrice(index) {this.productList[index].price * 0.9},},components: {Product,},
}
/script儿子
!-- MyProduct.vue --
templatediv classmy-producth3标题: {{ title }}/h3p价格: {{ price }}元/pp{{ intro }}/p!-- 子组件触发父组件绑定的自定义事件父组件绑定的函数执行 --button clicksubFnPDD大宝刀一刀999/button/div
/templatescript
export default {props: [index, title, price, intro],methods: {subFn() {this.$emit(subPrice, this.index)},},
}
/script跨组件通信eventBus
父组件管理数据
兄弟组件之间的通信实际上通过上面的学习已经可以实现了其实很简单把全部数据都丢给父组件管理通过父子之间的通信转化为兄弟之间的通信但是这种方法依赖于父组件的介入可能会使得组件之间的耦合度增加。、
evebntBus
当需要在两个兄弟组件之间进行通信时可以创建一个eventBus实例并在两个组件中都通过$on来监听事件通过$emit来触发事件。这样当一个组件触发事件时另一个组件就可以接收到这个事件并进行相应的处理。 首先先要创建一个空白的Vue对象并导出src/EventBus/index.js
import Vue from vue
export default new Vue()接收方要引入空白Vue对象eventBus并通过$on监听事件
!-- List.vue --
templateul classmy-productliv-for(item, index) in arr:keyindexspan{{ item.name }}/spanspan{{ item.price }}/span/li/ul
/templatescript
// 引入eventBus
import eventBus from ../eventBusexport default {props: [arr],// 组件创建完毕时监听send事件created() {eventBus.$on(send, index {this.arr[index].price *0.5})}
}
/script发送方也要引入eventBus然后通过eventBus触发事件
!-- MyProduct.vue --
templatediv classmy-producth3标题: {{ title }}/h3p价格: {{ price }}元/pp{{ intro }}/pbutton clicksubFn2PDD大宝刀一刀打骨折/button/div
/templatescript
// 引入eventBus
import eventBus from ../eventBusexport default {props: [index, title, price, intro],methods: {subFn() {this.$emit(subPrice, this.index)},subFn2() {eventBus.$emit(send, this.index)}},
}
/scriptVue组件的生命周期
Vue的生命周期指的是Vue组件从创建到销毁的过程Vue框架内置了钩子函数随着组件生命周期阶段自动执行。Vue中生命周期共4个阶段8个方法
生命周期钩子函数钩子函数初始化beforeCreatecreated挂载beforeMountmounted更新beforeUpdateupdated销毁beforeDestorydestoryed
生命周期如下图
初始化阶段
new Vue()Vue组件实例化Init Events Lifecycle初始化事件和生命周期函数beforeCreate生命周期钩子函数被执行此时是访问不到data和method的Init injections reactivityVue内部添加data和methods等created生命周期钩子函数被执行实例创建
挂载阶段
编译模板阶段开始分析Has eloption检查是否有el选项如#App 没有调用$mount方法有继续检查有无template选项 有编译template返回render函数无找到并编译el选项对应的标签作为要渲染的模板template beforeMount生命周期钩子函数被执行此时虚拟DOM还没有被挂载成为真实DOMCreate vm.$el and replace “el” with it把虚拟DOM挂载成为真实的DOMmounted生命周期钩子函数被执行真实DOM挂载完毕此时可以访问到真实DOM
更新阶段
修改数据进入更新阶段beforeUpdate生命周期钩子函数被执行此时DOM还没被更新这里不能访问DOM因为Vue的响应式是异步的可能还是取到更新后的DOMVirtual DOM re-render and patch虚拟DOM重新渲染对真实DOM进行打补丁updated生命周期钩子函数被执行此时虚拟DOM已更新
销毁阶段
此时要移除一些组件占用的全局资源如定时器、计时器、全局事件等
vm.$destory()被调用比如组件被移除view-ifbeforeDestroy生命周期钩子函数被执行拆卸数据监视器、子组件、事件侦听器destroyed生命周期钩子函数被执行 ref 和nextTick
ref
通过ref获取元素
template!-- 设置ref --dividhrefmyRefref/div
/templatescript
export default {mounted() {// 获取DOM的两种方法console.log(document.getElementById(h))console.log(this.$refs.ref)},// 后面通过ref获取组件可以methods: {sonFn() {console.log(son的方法执行了)},},
}
/script通过ref获取组件
templatediv idapp// 给组件添加refRef refmyComRef //div
/templatescript
import Ref from ./components/Ref.vue
export default {components: {Ref,},mounted() {// 获取组件console.log(this.$refs.myComRef)// 获取的组件可以调用组件内的方法了this.$refs.myComRef.sonFn()},
}
/script$nextTick
DOM更新后挨个触发$nextTick中的函数体执行而直接调用this.$nextTrick()返回的是一个Promise对象
templatediv idappbuttonclickbtnFnrefbtnRef{{ count }}/button/div
/templatescript
export default {data() {return {count: 0,}},methods: {btnFn() {this.countconsole.log(this.$refs.btnRef.innerHTML) // 这里点击按钮还是0this.$nextTick(() {console.log(this.$refs.btnRef.innerHTML) // 这里可以拿到数字1了})},},
}
/script动态组件和组件缓存
component :iscomponentName和keep-alive
componentis可以实现组件的动态切换会根据is后面的字符串匹配组件名展示组件配合keep-alive标签包裹的组件可以缓存到内存中不会被立即销毁实现动态组件切换
templatediv idappdiv动态组件/div!-- keep-alive标签包裹实现组件缓存 -- keep-alive!-- componentis 实现动态组件 -- component :iscomName/component/keep-alivebutton clickcomName Life切换组件Life/buttonbutton clickcomName Ref切换组件Ref/button/div
/templatescript
import Life from ./components/Life.vue
import Ref from ./components/Ref.vue
export default {data() {return {comName: Life,}},components: {Life,Ref,},
}
/scriptactivated和deactivated钩子函数
activated在组件激活时触发deactivated在组件失去激活状态时触发注意组件的created和mounted钩子函数只会执行一次而当组件再次被激活时会触发activated钩子函数而不是再次执行created或mounted。
script
export default {data() {return {msg: hello world,arr: [1, 1, 1, 1, 1],}},activated() {console.log(被激活了)},deactivated() {console.log(失活了)},
}
/script组件插槽
基本语法
通过slot标签让组件内可以接受不同的标签结构显示组件插入什么标签就显示什么标签
templatediv idcontainerdiv idapph3案例折叠面板/h3!-- 组件插入内容 -- PannelSlotp寒雨连江夜入吴/pp平明送客楚山孤。/pp洛阳亲友如相问/pp一片冰心在玉壶。/p/PannelSlot/div/div
/templatetemplatedivdiv classtitleh4芙蓉楼送辛渐/h4spanclassbtnclickisShow !isShow{{ isShow ? 收起 : 展开 }}/span/divdivclasscontainerv-showisShow!-- 插槽 --slot/slot/div/div
/template设置默认内容
不给slot标签放置内容slot标签内的内容作为默认内容显示 !-- 插槽 --slotp寒雨连江夜入吴/pp平明送客楚山孤。/pp洛阳亲友如相问/pp一片冰心在玉壶。/p/slot具名插槽
一个组件内有多出需要外部传入标签的地方使用多个插槽时就需要用到具名插槽通过name区分slot名字并通过template配合v-slot:name区分插入的地方
templatediv idcontainerdiv idapph3案例折叠面板/h3!-- 具名插槽 --PannelSlottemplate v-slot:titleh4芙蓉楼送辛渐/h4/templatetemplate v-slot:contentp寒雨连江夜入吴/pp平明送客楚山孤。/pp洛阳亲友如相问/pp一片冰心在玉壶。/p/template/PannelSlot/div/div
/templatetemplatedivdiv classtitle!-- 具名插槽 --slot nametitle/slotspanclassbtnclickisShow !isShow{{ isShow ? 收起 : 展开 }}/span/divdivclasscontainerv-showisShow!-- 具名插槽 --slot namecontent /slot/div/div
/template作用域插槽
使用插槽时需要使用到子组件内的变量就要用到作用域插槽。在子组件中的slot标签上绑定属性和子组件内的之然后再使用组件时传入自定义标签通过template标签和v-slot自定义变量名获取变量.
templatediv!-- 作用域插槽下拉内容 --slotnamescopedSlot:rowdefaultObj{{ defaultObj.one }}/slot/div
/templatescript
export default {data() {return {isShow: false,defaultObj: {one: 1,two: 2,},}},
}
/scripttemplatediv idcontainer/PannelSlot!-- 使用作用域插槽 --!-- 这里我们任意取名scope它会绑定slot上所有属性和值 --template v-slot:scopedSlotscope {{ scope.row.two }}/template/PannelSlot/div
/template自定义指令
自定义指令可以给组件拓展额外功能如自动获取焦点
全局注册
Vue.directive(gfocus, {inserted(el) { // inserted标签被插入网页时才触发还有update// 可以对el标签扩展额外功能el.focus() // 触发标签事件方法}
})局部注册
script
export default {directives: { // 自定义组件focus: {inserted(el) {// 对el进行操作el.focus()}}}
}
/script使用自定义指令
templateinput typetext v-focus
/template自定义指令传值
Vue.directive(color, {inserted(el, bindingColor) { // inserted标签被插入网页时才触发// 可以对el标签扩展额外功能el.style.color bindingColor.value // 触发标签事件方法}
})自定义指令触发方法
inserted标签被插入网页时才触发
update自定义指令所在标签刷新时执行
路由Router
基本使用
vue-router基本使用
下载vue_router模块到当前工程在main.js中引入VueRouter函数添加到Vue.use()身上注册全局RouterLink和RouterView组件创建路由规则数组路径和组件名的对应关系用规则生成路由对象把路由对象注入到new Vue实例中用router-view作为挂载点切换不同路由页面
// main.js
import Vue from vue
import App from ./App.vue
import Find from ./views/Find/Find.vue
import Mine from ./views/Mine/Mine.vue
import Friends from ./views/Friends/Friends.vue// 在main.js中引入VueRouter函数
import VueRouter from vue-router// 2. 注册全局组件
Vue.use(VueRouter)// 3. 定义规则数组
const routes [{path: /find,component: Find,},{path: /mine,component: Mine,},{path: /friends,component: Friends,},
]
// 4. 生成路由对象
const router new VueRouter({routes: routes, //routes是固定key传入规则数组同名可以简写直接写routes
})Vue.config.productionTip false// 5. 将路由对象注入到vue实例中this可以访问$route和$router
new Vue({router,render: h h(App),
}).$mount(#app)!-- App.vue --
templatediva href#/find发现音乐/abr /a href#/mine我的音乐/abr /a href#/friends我的朋友/a!-- 6.设置挂载点当url的hash值路径切换显示规则里对应的组件到这里 --router-view/router-view/div
/template声明式导航
router-link基本使用
vue-router提供了一个全局组件router-link来代替a标签其实质上最终会渲染成a链接其to属性等价于href但to使用时无需用到#自动添加它还通过自带类名router-link-active、router-link-exact-active提供了声明式导航高亮的功能。router-link-active 会在当前路由匹配到的路由及其子路由上添加而 router-link-exact-active 仅在当前路由完全匹配时添加
!-- App.vue --
templatediv!-- 这里改成了router-link和to --router-link to/find发现音乐/router-linkbr /router-link to/mine我的音乐/router-linkbr /router-link to/friends我的朋友/router-linkrouter-view/router-view/div
/templaterouter-link跳转传参
通过/path?参数名值通过$route.query.参数名获取值 router-link to/find?name哈哈发现音乐/router-linktemplatedivdiv发现音乐/divdiv发现传入值{{ $route.query.name }}/div/div
/template通过路由设置path/:参数名再经path/值传递参数在组件中使用$route.params.参数名接收参数
const routes [{path: /friends/:name, // 通过冒号接收具体值component: Friends,},
]router-link to/friends/小vue我的朋友/router-linkdiv发现传入值{{ $route.params.name }}/div路由重定向
通过redirect实现路由重定向
const routes [{path: /,redirect: /find,},
]404
const routes [// 404一定要在规则数组的最后{path: *,component: NotFound,},
]hash路由和history路由切换
hash路由是带#的如http://localhost:3000/#/friends切换为history模式为http://localhost:3000/friends但这在上线时需要服务器端支持否则寻找到的是文件夹
const router new VueRouter({routes,mode:history
})编程式导航基本使用
编程式导航即通过js实现路由的跳转以下path、name二者选一即可。这里vue-router要么安装3.0以下版本要么再传递两个回调函数作为成功和失败的回调否则重复push到同一个路由报错Avoided redundant navigation to current location因为3.0以上版本返回的是Promise需要增加两个回调
this.$router.push({// path: 路由路径,name: 路由名 // 使用路由名字在规则数组中需要添加name属性
})query和params的区别
query通过URL的查询字符串传递参数它会显示在URL中且不会影响路由的匹配。params通过name的路由参数传递它不会显示在URL中且必须与name的路由规则匹配。
编程式导航传参
this.$router.push({// path: 路由路径,name: 路由名,query: {参数},params: { // 使用params只能用name参数}
})二级路由
二级路由通过配置规则数组路由的children实现
const routes [{path: /find,name: find,component: Find,// 配置children children: [{path: second, // 这里不需要/component: Second,},],},
]templatedivdiv发现音乐/div!-- 这里还是要加上/find/ --router-link to/find/second链接到Second/router-link!-- 用来展示组件 --router-view/router-view/div
/template
script
export default {}
/script路由守卫
路由守卫可以让路由跳转前先触发一个函数进行守护主要用于路由权限判断
router.beforeEach((to, from, next) {// to: Object 要跳转到的路由对象信息// from: Object 从哪里跳转的路由对象信息// next: Function next()路由正常切换 next(false)原地停留 next(路径)强制修改到另一个路由上 不调用next也停留在原地
})riends但这在上线时需要服务器端支持否则寻找到的是文件夹
const router new VueRouter({routes,mode:history
})编程式导航基本使用
编程式导航即通过js实现路由的跳转以下path、name二者选一即可。这里vue-router要么安装3.0以下版本要么再传递两个回调函数作为成功和失败的回调否则重复push到同一个路由报错Avoided redundant navigation to current location因为3.0以上版本返回的是Promise需要增加两个回调
this.$router.push({// path: 路由路径,name: 路由名 // 使用路由名字在规则数组中需要添加name属性
})query和params的区别
query通过URL的查询字符串传递参数它会显示在URL中且不会影响路由的匹配。params通过name的路由参数传递它不会显示在URL中且必须与name的路由规则匹配。
编程式导航传参
this.$router.push({// path: 路由路径,name: 路由名,query: {参数},params: { // 使用params只能用name参数}
})二级路由
二级路由通过配置规则数组路由的children实现
const routes [{path: /find,name: find,component: Find,// 配置children children: [{path: second, // 这里不需要/component: Second,},],},
]templatedivdiv发现音乐/div!-- 这里还是要加上/find/ --router-link to/find/second链接到Second/router-link!-- 用来展示组件 --router-view/router-view/div
/template
script
export default {}
/script路由守卫
路由守卫可以让路由跳转前先触发一个函数进行守护主要用于路由权限判断
router.beforeEach((to, from, next) {// to: Object 要跳转到的路由对象信息// from: Object 从哪里跳转的路由对象信息// next: Function next()路由正常切换 next(false)原地停留 next(路径)强制修改到另一个路由上 不调用next也停留在原地
})
