vue开发优化方法【基于vue2】【续2】

Vue-router

场景：Vue-router是官方提供的路由插件
1.0缓存和动画

• 路由是使用官方组件vue-router,这里只叙述下路由- 的缓存和动画；
• 可以使用exclude(除了)或者include（包括），2.1.0新增 ，来做判断

<transition>
	<keep-alive :include"['a','b']">
	//或include="a,b" :include="/a|b/",a和b表示组件的name
	//因为有些页面，如试试数据统计，要实时刷新，所以就不需要缓存
	<router-view/> //路由标签
	</keep-alive>
	<router-view exclude="c"/>
	// c表示组件的name值
</transition>

注：匹配首先检查组件自身的name选项，如果name选项不可用，则匹配它的局部注册名称(父组件components选项的键值)。匿名组件不能被匹配
4.用v-if做判断，组件会重新渲染，但是不用一一列举组件 name
1.2全局路由钩子

1.3组件路由钩子



1.4路由模式
直接在路由中设置mode属性：hash或history
1.5Vue.$router
this.$router.push();跳转url,但是这个方法会向history栈添加一个记录，点击后退会返回到上一个页面
this.$router.replace();url跳转不会有记录
this.$router.go(n);类似window.history.go(n)
1.6Vue.$route
表示当前跳转的路由对象，属性有：
name:路由名称,
path：路径,
query：传参接收值,
params：传参接收值,
fullPath：完成解析后的URL，包含查询参数和hash的完整路径,
matched：路由记录副本,
redirectedFrom：如果存在重定向，即为重定向来源的路由的名字
this.$route.params.id:获取通过 params 或/:id传参的参数
this.$route.query.id:获取通过 query 传参的参数
1.7router-view的key
场景：由于vue会复用相同的组件，即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行created, mounted之类的钩子

<router-view :key="$route.fullPath"></router-view>

这样组件的created和mounted就都会执行

调试template

场景：在vue开发过程中，经常会遇到template模板渲染时JavaScript变量出错的问题，此时也许你会通过console.log来进行调试，这时可以在开发环境挂载一个log函数
//main.js
Vue.prototype.$log = window.console.log;
//组件内部
<div>{{$log(info)}}</div>

async和await

// async与await两个关键字的使用
// 
// 1，async用来声明一个异步函数，可以将一个普通函数声明为一个异步函数
//      获取里面的数据的话，需要通过await关键字来获取
//            await关键字只能在异步函数中使用，可以直接获取到异步对象中的返回结果
 async function test() {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            var name = '小爱，爱你';
            resolve(name);
        }, 1000);
    })
}
console.log(test());// 输出的就不是一个普通字符串了，输出的是一个promise异步对象，里面存放着该字符串

async function main() {
let data = await test(); //获取异步方法里面的数据
console.log(data);
}
main();