vue使用技巧及vue项目中遇到的问题

这里给大家分享一下vue中的一些技巧，希望对大家有用处。（话不多说上代码）

1，vue路由拦截浏览器后退实现表单保存类似需求（为了防止用户突然离开，没有保存已输入的信息。）

//在路由组件中：
mounted(){
},
beforeRouteLeave (to, from, next) {
 if(用户已经输入信息){
 //出现弹窗提醒保存表单，或者自动后台为其保存
 }else{
 next(true);//用户离开
 }

请参考vue文档全局钩子和组件钩子

2，路由懒加载写法:

 // 我所采用的方法，个人感觉比较简洁一些，少了一步引入赋值。
 const router = new VueRouter({
  routes: [
  path: '/app',
  component: () => import('./app'), // 引入组件
  ] })
 // Vue路由文档的写法:
 const app = () => import('./app.vue') // 引入组件
 const router = new VueRouter({
  routes: [
  { path: '/app', component: app }
  ] })

3，路由的项目启动页和404页面

一般项目都会设置这个，如果默认进入地址会跳到login页面，如果你输入的是一个没有用的路由或者是空路由会跳转到notFind页面（你自己设置的404页面）

 export default new Router({
  routes: [
  {
   path: '/', // 项目启动页
   redirect:'/login' // 重定向到下方声明的路由
  },
  {
   path: '*', // 404 页面
   component: () => import('./notFind') // 或者使用component也可以的
  },
  ] })

4，setInterval路由跳转继续运行并没有销毁问题

beforeDestroy(){
  //我通常是把setInterval()定时器赋值给this实例，然后就可以像下面这么暂停。
 clearInterval(this.intervalid);
},

beforeDestroy方法是生命周期里组件销毁前执行的钩子函数，在离开的时候会触发这个方法，这个方法在其他的地方也会有妙用，希望大家可以去了解一下。

5，setTimeout/setInterval this指向改变，无法用this访问VUe实例

这个地方大家的默认方法肯定是:

 //使用变量访问this实例
 let self=this;
  setTimeout(function () {
   console.log(self);//使用self变量访问this实例
  },1000);

其实这个地方我们可以用箭头函数，因为箭头函数会改变this的指向，而指向的刚好是自己的父级this，所以我们可以这样用：

 //箭头函数访问this实例 因为箭头函数本身没有绑定this
  setTimeout(() => {
  console.log(this);
 }, 500);

这样我们的this就是指向我们的vue实例了。

6，Vue 数组/对象更新 视图不更新