前端知识

[TOC]

# VUE遇到的问题

# 1. Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation

浏览器终端报错如下：

vue-router.esm.js?8c4f:1958 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/handlingPunishment".
    at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1959:15)
    at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1929:15)
    at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2223:18)
    at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2153:8)
    at VueComponent.changeItem (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/iview-loader/index.js?!./src/layout/ci-sidebar/index.vue?vue&type=script&lang=js&:92:20)

在网上查找资料，发现:https://www.cnblogs.com/rxfn/p/13086060.html

根据链接里面的描述，在Router文件或main.js文件里面添加如下：

import Router from 'vue-router'
const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error=> error)
}

然后这个问题就解决了。

# 2. Computed property "a" was assigned to but it has no setter

计算属性 CurrentStep 被赋值了，但此它并未定义 set方法 ，故出现上面错误提示。

computed: {
  showModel: {
    get: function () {
      return this.initShowModel;
    },
    set: function (v) {
      // 调用父组件方法关闭弹窗
      this.closeModel();
    }
  }
}

# 3. vue文件的css声明中加入了scoped导致样式无效

<style scoped>
.example { color: red; }
</style>
<template>
  <div class="example">hi</div>
</template>

转换结果：

<style>
.example[data-v-f3f3eg9] { color: red; }
</style>
<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

在template中如果引用了第三方组件，通过组件属性设置了样式类名，则会导致没有效果，这个需要注意。

https://www.jb51.net/article/129228.htm

https://vue-loader-v14.vuejs.org/zh-cn/features/css-modules.html

Edit this page