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()中，銷燬定時器。