vue
一、Vue
（1） Vue 目前有三个版本 1.0 2.0 3.0 3.0是2020年新出的。
（2）Vue 与 jQyery 一样 想要使用它，就必须要引入相关文件
引入vue 有两种方法：
第一种：去Vue的官网上 以cdn 的格式进行引入
1、<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
第二种：把vue.js 下载下来，然后进行引入
1 <script src="../vue.js"></script>
学习之前：在使用 vue之前，jq 找东西，操作它。
学习思想：1.学vue 之后 不需要找东西，通过修改数据驱动变化，然后渲染到页面上面。
2. 做页面，做功能时，要自己去认真分析需要的驱动数据， 没有就大胆去构造
vue特点 ： 数据驱动，没有数据则构造数据
组件化（拆分、最大程度就是代码复用）
二、常用的vue 指令，必须要熟练使用。
| 指令名称 | 指令含义 | 有缺点 | 举例说明 |
| vue指令 | |||
| 1. <span>{{a}}</span> 有的时候也会经常使用 | 表示将data中的a的值拿过去放在span标签作为内容 | 缺点：在页面刷新时会有延迟，并且在刷新的一瞬间会见实{{a}}大括号，所以在避免这种情况，我们应该选择2.0版本的 .text() |
案例 ： 比如增上改查的标题 <span>学生信息-{{mode?'增加': "修改"}}</span> |
| 2.<span v-text = 'a'></span> | 使用指令v-text ='data‘中的数据，就表示把a的值100放在span之间作为文本内容， | 优点：这个 就避免上面的一些不良现象 | <span @click= "isEdit = !isEdit" v-text=" isEdit? “完成"：”编辑“”></span> |
| 3.<div v-html = 'htmlStr'></div> | 表示将 data中的htmlStr键中的值拿来直接将<a></a>标签，插入在div标签中 | 和v-text相比的话，不显示标签 | |
| 单个条件的控制 （只有真与假的判断） | |||
| 4.<span v-if='islogin'>欢迎你</span> | islogin 为真显示欢迎您 |
有v-if 不一定有 v-else或者不一定有 v-else-if 但是如果没有 v-if 就一定没有后面的两种情况 |
//如果数据的长度>0 则显示 数据 v-else 则显示 暂无商品展示。 |
| <span v-else>请登录</span> | else 就是flase 为假的时候就显示为请登录 | ||
|
5.v-show
案例：
|
用户控制显示与不显示，本质是控制dom元素中display属性，用于隐藏和显示 ，更加使用与频繁的情景切换中 | tab选项卡的操作 |
案例： ///可以这个样子修改状态。 如果是ture的话，就让弹层出现 如果是false的话，就让弹层消失。 <div v-show= 'ok' @click = 'ok= false'></div> <script> el:'', data:{ ok:false; } </script> |
| 多个条件(多个条件之间是互斥的，只能进入一个条件，一定要将苛刻的条件放在前面，宽松的条件放在后面） | |||
| 5.v-if v-else-if v-else | v-if 和 v-else本质上是dom元素的创建与删除；控制修饰的元素有与没有；更加适合于不频繁的情景切换 |
<span v-if="score >= 90">优秀</span> <span v-else-if="score >= 80">良好</span> ... <span v-else>不及格</span> |
|
| 数组的迭代（将data中的数组中的值进行循环创建并放在标签里面） |
|||
|
5.第一代情况：（后期写代码都是这个样子写。） <li v-for=’item in names’> <span v-text=’item’></span> </li> 第二代情况 <li v-for=’（item, i）in names’ :key=’i’ v-text=’item’></li> 第三种情况：迭代的情况 <li v-for = 'n in 10' v-text= 'n'></li> |
1.根据names 数组的长度创建 ’li‘ ,在li标签里面再用 span 标签放数组内容； 2.根据 for循环船舰了names里面对应的三个li标签，并在li标签里面的存放数组中的值 ：key 这个以后写的时候一定要存在，可以存放id 3.数组的迭代，n 代表迭代项，从1-10开始迭代最后放在li标签中。 迭代数组或对象
|
v-for一定要带key ;v-for不仅可以迭代数组下标和元素item是值，i是下标，也可以迭代对象value是值，p是属性； 如果transition-group包住，那么就不能用数组的下标作为key属性的值，应该用其他指令的值，如每一项元素的id |
第二种情况 <li v-for = 'item in names' v-bind:key = item.id></li>
//这个 v-bind 可以省略掉 直接可以按照下面的来写。 <li v-for = 'item in names' :key = item.id></li>
|
|
标签属性的控制 v-bind |
|||
| 6.<img v-bind:src="imgPath" alt=""> |
键值imgPath中放图片路径，可以直接在v-bind:src中写键值对名字获取到图片 |
如果加了v-bind：就会当成js代码类型去解析，解析为最后的属性的值，不加就是字符串类型 |
是个属性操作时经常使用，尤其是在 路由中经常使用。 ：class="{checked:isAllCheck}" 添加一个全选的属性 |
| 7.
<span v-bind: class=’{ login: islogin }’></span> 就是 如果 login 是true 的话，就说明 是登录。 如果不是 true的话，就说明不是登录 |
V-bind:class可以简化为:class,给标签内的class属性动态添加class值，如果islogin为真就将login做为class属性值追加进去，假就追加空 |
V-bind:属性名->：属性名 动态class属性值三目运算符类： <div :class=’布尔类型的值或表达式’ ？’真的值’ ：’假的值’> |
可以直接把 v-bind 省略掉 <span : class=’{ login: islogin }’></span>
经常使用的是三目运算符： <div :class = islogin?login:register></div> |
点击事件的绑定控制 |
|||
|
<input type="button" value='按钮1' v-on:click="aaa"> <input type="button" value='按钮1' @click="aaa"> |
v-on:click可以简写为@click v-on:可以写为@； 绑定比较灵活， |
优点：绑定事件自动收到事件对象; 缺点： 无法传自定义的参数v-on:可以简写为@ |
<!-- 事件绑定的三种情况. -->
1. <!-- vue 在处理 v-on事件绑定时，会自己判断你给定的是不是一个函数地址函数地址 ： 就是一个方法名字，这个方法名字不传任何参数。如果是
一个函数地址的话，给定的函数就是事件处理函数，
这个函数会默认收到事件对象 e ,
2.如果我们给定的不是一个函数，而是一段可执行的语句，vue会悄悄的创建一个
匿名函数把我们给的可执行语句包起来，且这个匿名函数的形参是$event,
这个匿名函数才是真正的事件处理函数，$event就是事件对象-->
|
|
<input type="button" value='按钮2’@:click="bbb(100)"> l传给我们的是一个立即执行函数。 这个 |
100是自定义传的参数 |
优点： 可以传自定义的参数； 缺点： 无法收到绑定事件对象 |
|
|
<input type="button" value='按钮3'@:click="ccc($event, 100)"> |
$event事件对象，100是自定义参数 |
优点：既可以收到绑定事件的事件对象，也可以传自定义参数； 缺点： 不好记 |
|
| 点击事件的修饰符 | |||
| 1.阻止冒泡事件 | |||
|
<p class='child' @click.stop="childClickHandler">我是第一个儿子</p> |
这个就是不想让其他地方同样收到 和我一样的点击事件。 |
||
| 2.阻止其他事情对我的影响 | |||
|
<div class=’father’ @click.self="fatherClickHandler"> <p class=’child’ @click="childClickHandler"></p> </div> |
.self是忽略其他冒泡上来的事件，只处理自己的 |
||
| 3.一次触发事件 | |||
|
<p class='child' @click.once="childClickHandler">我是第二个儿子只能点一次触发点击事件，其他不响应</p> |
.once只能点一次触发事件，其他任何一次点击都不相响应 |
||
|
4.阻止自身默认行为 .prevent修饰符会阻止自身默认的行为就像a标签的网页跳转 |
|||
|
<ahref="http://www.baidu.com"@click.prevent="childClickHandler">去百度,</a> |
.prevent修饰符会阻止自身默认的行为就像a标签的网页跳转 |
||
|
表单元素的属性控制 |
|||
|
<input type="text" v-model="model.name">
在from 中的button会自动刷新，三种解决方法： 1.不使用 from 2.使用input type = 'button', 3.阻止自身默认行为（推荐使用在 @click.stop）。
在写用户名 首先要去掉前后空格 .trim .number 把字符串 弄成 整型 这个修饰符的作用：只要是你输入的是一个数组，就会自动给你改成 整型 |
v-model双向数据绑定，在文本框输入的值实时在model中监听你可以用 |
单选按钮和全选按钮绑定的值是布尔类型的值， |
<div class="foot-wrapper" v-show="ok" @click.self="fatherClickHandler">
<div class="foot-warrpe-conten">
<div class="from">
音乐名称：<input type="text" v-model = 'model.musiceName'>
作者：<input type="text" v-model = 'model.name'>
合作者：<input type="text" v-model = 'model.collaborator'>
阅读量：<input type="text" v-model = 'model.readingVolume'>
<input type="button" value="确定" @click = 'saveHandler'>
<!-- <input type="button" value="取消" @click = 'on-ko'> -->
</div>
</div>
</div>
model:{id:0, musiceName:"",name:'',collaborator:'',readingVolume:''},
|
-----------------------------------------------------------------------------
案例： v-show案例
template 可以给我们进行传参 <i class="iconfont icon-ascending" v-show="orderSort === 'asc'" @click="sortToggle('desc')"></i> <i class="iconfont icon-descending" v-show="orderSort === 'desc'" @click="sortToggle('asc')"></i> //接受的是一个形参，什么名称都是可以的 sortToggle:function(sort){ if(this.isLoading){ // 判断是否处于加载状态中 alert('亲，您的操作太频繁..'); return; } this.orderSort = sort; this.getListData(); },
第二中不需要任何的传参
===================================================================================================================================
Vue的一些操作
给获取的data数据 进行添加数据 同时这个也是 一打开页面进行运行的ajax
1 created:function(){ 2 axios({ 3 method:'post', 4 url:'http://localhost:3000/cart/list', 5 headers:{ 6 "Authorization":sessionStorage.getItem('token') 7 } 8 }) 9 .then(response => { 10 console.log(response.data.data) 11 if( response.status === 200 ){ 12 switch( response.data.code ){ 13 case 200: 14 // 数据库返回来的数据是可以被改变的，可以添加两个值用于控制按钮的激活 15 response.data.data.forEach( item => { 16 item.checked1 = true; 17 item.checked2 = false; 18 } ) 19 this.list = response.data.data; 20 break; 21 case 199: 22 case 404: 23 console.log(response.data.msg) 24 } 25 } 26 }) 27 .catch( error => { 28 console.log(error) 29 }) 30 }
计算属性的使用也是 this.计算属性里面的名字。
计算属性 ： 在使用的时候 不可以进行赋值
//当我们页面中需要显示的数据，或要完成某个功能要用到的数据 ，无法直接得到，而是通过其他数据 按一定的逻辑计算得出时，我们应该采用 计算属性
// 定义计算属性的函数 必须显示的return一个值
计算属性定义看起来是一个函数，但是使用起来要想使用data中的数据一眼
计算属性的值是根据别的值算出来的，别的值成为计算属性的’依赖属性‘
计算属性的优势在于 ’依赖数据变了‘，会自动重新计算自身的新值，依赖数据不变，会用上一次的值，可以减少计算
计算属性的值只能用，不能改，要改的话去修改计算属性依赖的数据
1 // 计算属性 2 computed:{ 3 total:function() { 4 var result = 0; 5 this.list.forEach( item => { 6 if( item.checked1 ) result += item.price*item.count; //必须return 一个值 7 } ) 8 return result; 9 }, 10 amount:function() { 11 var result = 0; 12 this.list.forEach( item => { 13 // 处于非编辑状态并且按钮被选中的数量加起来 14 // 两个可能一个都不满足 15 if( (!this.isEdit) && item.checked1 ) result += item.count; 16 // 处于编辑状态并且按钮被选中的数量加起来 17 if( (this.isEdit) && item.checked2 ) result += item.count; 18 } ) 19 return result; 20 }, 21 isAllCheck:function() { 22 if( this.isEdit ){ 23 // every 如果元素全部满足条件(与条件进行比较都为真)，则返回真 24 return this.list.every( item => item.checked2 ) 25 }else{ 26 return this.list.every( item => item.checked1 ) 27 } 28 } 29 },
常用案例
1.性别一般用 true .false 或者 1 、0 表示 用的时候在进行判断
1 <p v-text=" item.sex ? '男':'女' " ></p> v-text中可以写三目运算符判断赋值
2.if 判断 ，先判断的好处 当为假的时候可以直接 return 少一层嵌套
1 remove:function(id) { 2 if( !confirm('真的要删除改地址吗？') ) return; // 少了一层嵌套 3 var index = this.address.findIndex( item => item.id === id ); 4 this.address.splice( index,1 ); 5 alert('删除成功') 6 }
3.表单 想 最好用 form 包起来 label 是为input 服务的，一般是嵌套使用
1 // 弹窗的命名：dialog 会话框 wrapper 外包装 2 <div class="edit-dialog-wrapper"> 3 <div class="edit-dialog"> 4 <label>姓名：</label> 5 <input type="text" /> 6 </div> 7 </div>
4. 如果 click 里的函数语句只有以句，可以直接在@click 里面写。
1 <div class="add-cancel" @:click="addShow = false"> <button>取消</button> 2 </div>
5. 表单的按钮有submit提交 表单并刷新页面 的 默认行为
解决方法： 可以不适用 from 2.可以进行使用 方法来进行消除 默认行为。
6.data 中 设置变量的初始值也很重要，主要不要太分散 v-model
7.布尔类型的数据不用给值，给属性就是默认为true
8.label的for属性关联了与其对应的ID的input标签，点击label，input标签也可以
1 <label for="name">姓名：</label> 2 <input type="text" v-model.trim="edit.model.name" id='name' />
Vue绑定单选数据
<!-- 布尔类型的驱动radio一定要给一个value值 :value --> <label>性别：</label> <input type="radio" name='sex' v-model.trim="edit.model.sex" :value="true" checked /> 男 <input type="radio" name='sex' v-model.trim="edit.model.sex" :value="false" /> 女
9.数据深复制
1 深赋值、深复制：不只在‘栈’中添加一个新的，在‘堆’中野添加一个新的，各改各的， 2 互不影响 3 this.edit.model = Object.assign({},item)
10.在 数据加 - 减-
1 <div class="infor-acount"> 2 <!-- item.count -=1 --> 3 <input type="button" value="-" :disabled="item.count === 1" @click="countAdd(item)"> 4 <!-- <input type="text" v-text='item.count'/> --> 5 <p class="in for-title" v-text="item.count" ></p> 6 <!-- item.count +=1 --> 7 <input type="button" value="+" :disabled="item.count === 5" @click="countShop(item)"> 8 </div>
==========================================================================================
1 组件 Vue.component 的初始写法：这种写法只适用于同步创建组件 2 <!-- 非页面级公共组件 --> 3 <!-- 实现代码复用，类似iframe，要写在页面级的前面，因为要被公共调用 --> 4 <!-- template 中的内容可以写在HTML中的<template id='template-con'> 5 </template>中 起个名以便调用 --> 6 <script type="text/javascript"> 7 var MiNav = Vue.component('mi-nav',{ 8 template:"<div>nav的内容</div>" // 也可以写选择器 #template-con 9 }) 10 </script> 11 // 创建了 mi-nav 的后可以直接在html页面中使用 <mi-nav></mi-nav> 标签 12 13 <!-- 创建页面对应的组件，有几个页面创建几个组件 --> 14 <!-- 页面级的组件交由路由控制 --> 15 <script type="text/javascript"> 16 // vue组件的本质，创建一个HTML标签，存放对应页面的HTML代码，这个标签只有 17 vue读得懂 18 // 该标签要写在vue管理的区域，像普通标签一样使用，在HTML中显示为<mi-home> 19 </mi-home> 20 // 有返回值，定义变量接收返回值，以便配置路由时使用 21 var MiHome = Vue.component('mi-home',{ 22 template:"<div><mi-nav>home页面的内容</mi-nav></div>" /* 23 template 模板 是一个字符串，也可以写选择器 */ 24 }) 25 </scrip>
1 // 创建路有对象，设置整个spa vue程序的路由地图 2 // 有返回值，定义变量接收路由对象的返回值，以便配置vue时使用 3 // path：路由路径 component：对应路由渲染的组件 4 var router = new VueRouter({ 5 routes:[ 6 // 默认跳转(重定向) 7 { path:'/' , redirect:'/category' }, 8 { path:'/home' , component: MiHome }, 9 { path:'/category' , component: MiCategory }, 10 // meta是藏值 藏值的含义是，该页面是否需要token验证 11 { path:'/cart' , component: MiCart , meta:{ needAuth:true } 12 }, 13 { path:'/login' , component: MiLogin }, 14 { path:'/profile' , component: MiProfile }, 15 { path:'/list' , component: MiList }, 16 ] 17 }) 18 // 关于路由要会的 19 // 路由跳转，路由拦截，路由传参，路由 20 // 路由守卫 beforeEach 是在进入每个路由之前都要先判断一次 21 // afterEach 是进入每个路由之后都判断一次 22 // to 是去哪里 from是从哪里来 next是下个页面去哪里，是个函数 23 // beforeEach 里的to返回的数据包含路由的信息以及两个用于传参的对象 query， 24 params 25 // 页面之间传参有两种方式，query适合复杂的，params适合简单的数据 26 router.beforeEach(function(to,from,next){ 27 if(to.meta.needAuth && !sessionStorage.getItem('token')) // 判断 28 如果当前要去的页面需要token，并且没有token，则去登录页 29 next({ path:'/login' , query:{ to } }); // 并把当前页面的信息 30 传给query to 返回的数据整个传给query 31 else 32 next(); 33 })
1 // 在vue组件创建的模板中根节点只能有一个 2 // 创建一个vue的根实例 new Vue也是特殊的组件,也有template 3 // 树状结构：根实例 - 页面级组件(router决定) - 公共组件 4 new Vue({ 5 el:'#root', 6 template:"<router-view></router-view>", 7 router /* ES6 规定，如果键值名一样，可以只写一个router */ 8 }) 9 </script>
1 <div id="root"> 2 <!-- router-view就是将来路由匹配的组件渲染的占位符 --> 3 <!-- 给路由定位用的，不然不知道在哪里渲染 --> 4 <!-- 配置完路由具体访问时，router-view会自动被替换成对应的组件标签 --> 5 <!-- 有这个标签的原因是：vue-router文件里已经创建了该组件标签 --> 6 <!-- 两种写法，看个人喜好 7 1、在跟标签里写<router-view></router-view> 8 2、在根实例的template里写 template:"<router-view></routerview>" 9 --> 10 <router-view></router-view> 11 </d
1 <!-- 异步创建组件的 html 文件不需要 html 中默认的那些设置，直接写 template 里 2 应有的内容 --> 3 <!-- 写CSS样式时注意避开样式重合，给每个组件最外层的div 定义一个名字，写样式时 4 每句样式都写上这个名 --> 5 <!-- 当前这种过渡开发模式下的弊端： 6 每个组件对应的文件太多 7 每个组件对应的引入文件太多 8 文件的引用顺序 9 公共组件文件的引入，HTML的引入，异步创建组件 10 --> 11 <!-- 具体工作时不用这种过度开发模式，之后会讲 -->
1 路由router配置中的写法：{ path:'/list' , component: MiList } 2 var MiList = ({ // 要有一个变量接收Vue.component返回的值，以便路由对象 3 使用 4 var componentConfig = { 5 data:function() { // ES6 规定 如果键值对的值是函数，可以 6 把:function省略 data() { } 7 // vue规定，只有根实例的data才能直接写对象{}，如果是自定义组件只能 8 data一个函数返回一个对象，对象里面正常按照格式配置 9 return { 10 listMain:[], 11 activeId: 0, 12 avatar:'', 13 listSub:[] 14 }; 15 }, 16 methods:{ 17 18 }, 19 created:{ 20 21 } 22 }; 23 24 // 组件自己对应的css自己搞定，自己动态请求插入页面的head中 25 // axios 有两种写法 26 axios.get("pages/category/index.css") // 请求css样式 27 .then(response => { 28 var style = document.createElement('style'); // 创建style节 点 29 style.type = 'text/css'; // 配置type属 性 30 style.innerHTML = response.data; // 请求回来的 31 css样式赋给style标签 32 document.querySelector('head').appendChild(style) // 把 33 style标签插入head中 querySelector找到符合条件的第一个元素节点 34 }); 35 // 注意需要 return 不然IIFE函数没有返回值 Vue.component 的第二个 36 参数是promise函数，自带resolve,reject两个参数 37 return Vue.component("mi-category",function( resolve,reject ){ 38 // 自己组件对应的template模板内容，自己请求 39 axios({ 40 method:'get', 41 url:'pages/category/index.html', // 42 }) 43 .then(response => { 44 componentConfig.template = response.data; // 请求回来的 45 html内容给该对象的template元素 46 resolve(componentConfig); // 要调用成功的回调函数 47 }) 48 }) 49 })();
1 标签（在调试窗口中显示的还是a标签） --> 2 <!-- router-link用法和a标签一样，写css样式时要用 a --> 3 <!-- vue-router提供了两个组件 router-link router-view --> 4 <!-- <router-link to="/home"> to中的路径要是在路由中配置过得 并且使用 5 router-link 时，一定要带 to 属性 --> 6 <!-- router-link 会自动判断自己连接的页面是否处于激活状态，并自动添加一个 7 class: router-link-active -->
1 一般用法：<div class="btn-back" @click="$router.back()"> </div> 2 case 200: 3 sessionStorage.setItem('token',response.data.data); 4 sessionStorage.setItem('username',this.name); 5 alert('登陆成功') 6 // 从哪里进的登录，再回哪里 7 // $router 用于页面跳转 $route用于从路由中拿数据用 8 // || 表示前面的值为真则去前面的，前面的值为假则去后面的 9 this.$router.replace(this.$route.query.to || '/category' ); 如 10 果有前一个页面就去前一个，没有就去分类 11 break; 12 case 401: 13 // 登录超时代表没资格看这个页面，不能再跳回来，以及清除缓存的token等 14 // this.$route 获取当前的路由数据 15 sessionStorage.removeItem('token'); 16 sessionStorage.removeItem('username'); 17 this.$router.replace( { path:'/login' , query:{ to:this.$route } 18 } ); 购物车的401错误信息，跳转登录页面 19 break;
1.组件： 就是 component 拆分思想。
特点：读懂保留读不懂替换
本质： 把一段html代码封装起来，起一个 只有 vue才能读懂的名字，然后像普通标签一样使用。
但是这个要写在 vue数据控制中
1 什么是拆分思想： 2 拆分思想就是 把多个页面 最终拆分到一个页面里面去。
拆分思想案例
1 <div id="root"> //这个是 vue 数据控制的内容展示 也叫模型 2 <router-view></router-view> //这个是展示各个组件的内容 3 </div> 4 5 //这个是创建组件 6 <script src="../vue.js"></script> 7 <!-- 在 vue 之后才可以.因为要依赖 --> 8 <script src="../vue-router.js"></script> 9 <!-- 创建组件 --> 10 <script> 11 Vue.component('mi-home',{ 12 // template 模板 存放的是字符串 ,这个里面存放的是 首页对应的html代码 13 template:"<div>这是home主页面对应的html代码内容</div>" 14 }) 15 </script> 16 <script> 17 Vue.component('mi-category',{ 18 template:"<div>这是category页面对应的html代码内容</div>" 19 }) 20 </script> 21 22 // 这个是 控制 模型 23 <script> 24 new Vue({ 25 el:"#root",28 }) 29 </script>
虽然可以让页面显示我想要显示内容，甚至把所有的东西都显示出来。
但是我不想让 页面都是显示出来 ， 所以就需要 vue 中 路由。
组件创建多个之后，但是每一次只显示一个组件才可以，
这个时候就创建了路由
这个路由需要引入
要在 vue.js之前引入之后在进性引入
1 <script src="status/js/vue-router.js" type="text/javascript" charset="utf-8"></script>
做单页面应用程序 ， 程序员要先前设置好路由。
什么是路由： 根据浏览器的地址变化，动态决定渲染哪一个组件。
比如：从而进行页面渲染
| 路由路径 | 对应渲染的组件 |
| /home | home主页组件 |
| /category | category分类页页面组件 |
| /list | list 商品列表页组件 |
路由路径 不要写大写字母。起名字的时候也不要和html识别的标签重
注意：
内容在渲染过程中 html识别的标签都是小写字母，同时一下标签
html标签也不识
===================================================================================
数据少单页面 进行数据控制
案例 ： 数据少的时候，能在一个html处理的
创建标签名：起名字的时候也不要和html识别的标签重
下面错误现象
===============================================================================================
1 路由： 路由三大特点： 2 1.路由配置 2. 路由传参 3. 路由跳转 4.路由验证拦截 3 1.路由配置： 路由配置： 4 2.路由传参 ：$rout 5 3.路由跳转 ：$router 6 4.路由验证拦截： 只验证有没有，不管过没有过期
1 （6）整合页面级组件 views / index.js 2 麻烦的写法：只是换个地方挨个，轻松的是router 3 // 整合路由对象，并导出 4 // 将view文件下面的所有页面级组件整合成一个对象统一导入导出 5 // 让router/index.js在使用的时候更加的舒服和优雅 6 import Category from "./category"; 7 import Home from "./home"; 8 import Profile from "./profile"; 9 import Login from "./login"; 10 import List from "./list"; 11 import Details from "./details"; 12 import Cart from "./cart"; 13 14 // 键值对简写：键值同名可以只写一个 15 export default { 16 Category, 17 Home, 18 Profile, 19 Login, 20 List, 21 Details, 22 Cart 23 };
24 //后期将会使用这种自动导入创建： 25 // 自动导入导出，函数：require.context(路径，是否查找子目录，什么文件) 批量 导入 该函数只有webpack可以识别 26 // 项目是由webpack打包的 27 // files.keys() 是拿到的文件的路径 files(文件的路径).default 拿到相当于 28 import Home from "./home" 的东西 29 var files = require.context("./",true,/index.vue$/); 30 var views = {}; 31 files.keys().forEach( filepath => { 32 var key = filepath.match(/.*\/(.*)\/index.vue$/)[1]; // 切割出键 33 名 34 views[key] = files(filepath).default; 35 }); 36 export default views;
浙公网安备 33010602011771号