Vue从入门到入门，盘点使用中遇到的各种疑问

    以下将盘点vue学习中，遇到的一些问题，仅以此做记录。学习使用的是element-admin框架。

一、从当前路由跳转到当前路由（跳转相同路由）时，报错【NavigationDuplicated】。

参考地址：https://www.cnblogs.com/rever/p/11577322.html

解决方法：

    1、对于单个路由

    router.push('/location').catch(err => {err})

    2、所有路由

    在路由的头部加入如下代码：   

import Router from 'vue-router'

const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

 二、使用【mixin】，提取公共方法。

参考地址：https://www.cnblogs.com/mengfangui/p/9046271.html

使用mixin将公共的部分提起出来，再根据需要混入，我主要用于filters。

export const mixinTest1 = {
    created() {
        this.hello();
    },
    methods: {
        hello() {
            console.log('mixinTest1');
        }
    }
};
---------------------------------------------------------
import {mixinTest1} from './../assets/js/mixin';
export default {
    mixins:[mixinTest1],
    name: 'hello',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    }
}

  关于合并的规则，请参考官方文档：https://cn.vuejs.org/v2/guide/mixins.html

三、刷新当前页面【provide/inject】

参考地址：https://blog.csdn.net/Janus_lian/article/details/84970609

实现原理：将父组件的router-view关闭再开启，实现刷新。这种方法刷新的是router-view包含的部分，而不是整个网页。

解决方法：

<template>
    <div id="app">
        <router-view v-if='isRouterAlive' />
    </div>
</template>
 
<script>
export default {
    name: 'App',
    provide(){
        return{
            reload:this.reload
        }
    },
    data(){
        return{
          isRouterAlive:true,
        }
    },
    methods:{
        reload(){
          this.isRouterAlive = false ;
          this.$nextTick(function(){
              this.isRouterAlive = true ;
          })
        }
    }
}
</script>
-----------------------------------------------
<template>
    <div id='test'>
        <button @click='refresh()'>刷新</button>
    </div>
</template>
<script>
    export default{
        name:'test',
        inject:['reload'],  //注入
        created(){
            console.log('刷新了')
        },
        methods:{
            refresh(){  
                this.reload();
            }
        }
    }
</script>

四、显示背景图

参考地址：https://www.cnblogs.com/qdlhj/p/11127817.html

问题描述：在css中使用背景图，运行npm run build之后，背景图显示不正常。

解决方法：找到build 下的 utils.js文件，改写如下：

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'  // 增加这句
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

 

五、使用【replace】跳转去掉历史记录

参考地址：https://blog.csdn.net/qq_39985511/article/details/83342716

补充说明：在微信中，ios会在页面产生历史记录的时候，生成下方的前进后退条，本想通过js一次性清空所有历史记录消除前进后退条，但目前仍未找到有效方法。 @TODO

解决方法：

<router-link replace></router-link>

六、打包时，删除【console.log，debugger】

参考地址：https://blog.csdn.net/weixin_37064409/article/details/86578679

解决方法：找到build/webpack.pro.conf.js，修改如下代码：

new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false,
          drop_debugger: true, // 新增，去除debuger断点标志
          drop_console: true  // 新增，去除console.log
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

七、使用html5 <audio>标签

1）谷歌浏览器无法自动播放，需要先点击页面的任意位置才能开启自动播放模式。【原因不详】。

2）使用百度tts语音转换：https://www.jianshu.com/p/e3a203d20c31

 

##、一些需要注意的点

1）由于是单页应用，如果使用定时器，路由切换的时候，定时器并不会自动销毁。可以在beforeRouteLeave()中，销毁定时器。