vue2.0开发必会技能(二)

这是我参与更文挑战的第12天，活动详情查看：更文挑战

1、v-for为什么要加key

- vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了"高效的更新虚拟DOM"
- 注意:key如果有不是唯一会直接报错，手机端会渲染错乱。
- 遇到的bug：iphone11 赋值渲染的checkbox和input消失了，key无值导致渲染失效。

2、路由跳转的五种方式：

query 传参配置的是path，而params传参配置的是name

1、router-link

<!-- 使用 router-link 组件来导航，通过传入 `to` 属性指定链接，<router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link :to="{name:'home', params: {id:1}}">  
<router-link :to="{name:'/home', query: {id:1}}"> 
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。

2、router.push(编程式路由)

    router.push({ name: 'name', params: { id: '123' }})
    // 变成 /name?id=1
    router.push({ path: 'name', query: { id: '1' }})

3、this.$router.push() (函数里面调用)

this.$router.push({path:'/home',query: {id:'1'}})
this.$router.push({name:'home', params: {id:'1'}}) 

4、this.$router.replace() //用法同上面push 5. this.$router.go(n)

this.$router.go(n) // 向前或者向后跳转n个页面，n可为正整数或负整数

路由push、replace和go的区别：

• push跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
• replace:跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)
• go:向前或者向后跳转n个页面，n可为正整数或负整数

query和params区别:

• query类似get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 刷新页面id还在

• params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失,传递密码等重要数据应用。