Vue疑难杂症

发表于 | 分类于

使用Vue开发项目的过程中遇到的问题及解决方法

本文收集群友发得问题而写…持续更新。。。
话不多说，直接上问题与解决方法：
1.vue-resource 处理多个请求的问题
不知道这种情况算不算啊。。tab切换的时候 前一个请求未完成点击切换立马发了下一个请求，导致之前的请求结果也渲染了
解决方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//其实github上有源码，我就直接复制粘贴了
 this.$http.get('/someUrl', {

    // use before callback
    before(request) {

      // abort previous request, if exists
      if (this.previousRequest) {
        this.previousRequest.abort();//中断请求
      }

      // set previous request on Vue instance
      this.previousRequest = request;
    }

  }).then(res=> {
    // success callback
  }, err=> {
    // error callback
  });

2.组件通信(包含非父子组件)
最常见的父子组件通讯采用prop，这个应该不用多说吧 不知道的看下面的链接
组件传值-Prop
使用prop的注意点：

1
2
3
<child1 ref="child1" msg="{name:'bill'}"></child1>
<child1 ref="child1" :msg="{name:'bill'}"></child1>
//首先冒号是v-bind的缩写，不带冒号后面是字符串，带了冒号就是数据绑定，引号里面的内容是变量或者表达式, 组件内不能修改props的值

子组件修改父组件的数据操作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//这在vue中是不允许的，因为vue只允许单向数据传递，这时候我们可以通过触发事件来通知父组件改变数据，从而达到改变子组件数据的目的.
子组件：
<template>
    <div @click="toChange"></div>
</template>

methods: {
    toChange() {
        this.$emit('getChange','shadow'); //主动触发getChange方法，'shadow'为向父组件传递的数据
    }
}

父组件：
<template>
  <div>
      <child @getChange="change" :msg="msg"></child> //监听子组件触发的getChange事件,然后调用change方法
  </div>
</template>
methods: {
    change(msg) {
        this.msg = msg;//父组件得msg值为shadow
    }
}

下面说一下非父子组件的传值：
vue的官网其实已经写了 bus，但是好像并不详细 好多人不会用，下面讲解一下用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//写法可以有两种(注意！！都是在main.js进行操作)：
new Vue({
  el: '#app',
  router,
  components: { App },
   data: {
  // 空的实例放到根组件下，所有的子组件都能调用
    Bus: new Vue()
  },
  template: '<App/>'
})
//第一种写法的使用方法为(发送，接收)：
this.$root.Bus.$emit('事件名',payload);//payload为传送的值
this.$root.Bus.$on('事件名',shadow=>{consloe.log(shadow)//shadow为接收到得值})

//第二种写法类似插件，就是简化使用：
Vue.prototype.$Bus = new Vue();
//使用方法就是写法上的改变：
this.$Bus.$emit('事件名',payload);//payload为传送的值
this.$Bus.$on('事件名',shadow=>{consloe.log(shadow)//shadow为接收到得值})

除了bus非父子组件通信就要用vuex了，之前有过vuex得文章，写得一般 有问题得可以加群讨论(163958730)
3.vue-router导航守卫
这个其实项目前差不多都是配置好得。。我也不知道要说什么 挑几个常用的讲一下
一些基础的参数说明我就不写了吧。。官网链接
router.beforeEach

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requireAuth)){  // 判断该路由是否需要登录权限
    if (token) {  // 判断当前的token是否存在
      next();//已登录直接进入下一个页面
    }
    else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  }
  else {
    next();
  }
});
//需要登录的组件相对应的路由加上配置
{
            path: "result",
            component: result,
            name: 'result',
            meta: {requireAuth: false}
},

beforeRouteEnter(组件内的守护)

1
2
3
4
5
6
7
//一般用于进入组件之前需要操作
//父子组件有时候好像有点坑。。使用的时候自己注意吧
beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

4.vue-router懒加载组件引入方式写法：

1
const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'Home');

5.判断条件满足以后才往下执行点击事件(略微有个小坑吧)

1
2
3
@click="isTrue&&chooseCompany"//这样写在click方法里打debugger并不会进去

@click="isTrue&&chooseCompany()"//所以这才是解锁得正确方式~~~

6.vue定义了别名(alias)，引用图片路径错误问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~
//就是要在别名前面加一个~
alias: {
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components')
}

<template>
    <img src="~assets/images/logo.jpg" />//引用
</template>
<script>
import 'assets/css/style.css'
</script>
<style>
.logo {
    background: url(~asset/images/bg.jpg)
}
</style>
//意思就是: 告诉加载器它是一个模块，而不是相对路径
//注意: 只有在template中的静态文件地址和style中的静态文件地址需要加~, 在script里的, 别名定义成什么就写什么.

shadow wechat
扫一扫，关注微信公众号。