Vue 问题及解决方法 key值,v-bind:src,7中路由守卫 (一)

---

前言

我自己也会不断的记录,自己在开发中遇到问题

提示：下面的内容是我在vue开发过程中到的问题,以及我自己的解决方案(这篇文章主要是,我自己记录的,方便我以后查看的时候,可以及时的找到错误)

---

一、v-for 一定要用到key值？

1.首先, 我们在使用 v-for 循环的时候可以不写key的值(在js文件中)
(但是在Vue CLI中一定需要写,不写就会报错)
********切记在vue脚手架中一定要绑定key,千万别嫌麻烦*******************

2.其次, 在给key绑定值的时候(!!!!一定要用唯一标识!!!!)

如图所示:

加上 :key=‘n’,就不会出现问题了

二、图片 src属性动态绑定地址问题

场景:封装轮播图的时候,想要动态的从assets文件下的图片,并控制显示/隐藏
我的错误:
1.第一次使用 :src=`"@/assets/${n}.jpg"` (无法加载图片)   ×(错误)
2.第二次尝试使用计算属性拼接图片的相对地址(无法加载图片)  ×(错误)
(地址可以更改,但是获取不到图片)  

解决办法:
1.使用的是comment.js 的导入方法 require(图片的相对地址) 如下图:
2.直接绑定网络路径 例如 :src="a" 
 data:{a : http://www.127.0.0.1/path.jpg} 

三.关于路由守卫的(3种类型的守卫)

路由守卫:

## 1.全局前置守卫
1. 全局前置守卫: beforeEach (会多次触发;跳转就触发)
2. 全局解析守卫: beforeResolve 解析守卫
3. 全局后置守卫: afterEach 把组件实例对象传入到 组件内守卫的beforeRouterEnter 的 next(vm=>{})中,next中vm代表的是当前组件的实例

## 2.路由守卫
1. beforeEnter 路由独享守卫

## 3.组件内的守卫
1. beforeRouterEnter 进入组件之前触发 (只触发一次)
2. beforeRouterUpdate 组件更新之前触发 (动态参数变化,query字符串变化)
3. beforerouterLeave 离开路由组件之前触发 (只触发一次)

路由执行的顺序

1.先在失活的组件中执行      beforeRouteLeave 组件内守卫
2.调用                     beforeEach 全局的前置守卫
3.在重复利用的组件里面执行  beforeRouteUpdata 组件内更新守卫
4.执行                     beforeEnter  路由的独享守卫
5.在激活的组件中执行        beforeRouteEnter 组件内守卫
6.执行                     beforeReslove 全局解析守卫
7.执行                     afterEach    全局的后置守卫
8.再去执行 beforeRouteEnter 里面的回调函数 next(组件实例对象)

如图所示:(完整的路径)

1.第一次打开,触发的路由守卫:

2.首页====>关于,,触发的路由守卫

关于=====>Demo1,,,触发的路由守卫

Demo1======>Demo1触发的路由守卫

Demo2 ===> 首页,,,,触发的路由守卫

开发中的后续问题(二) ======>