vue項目 為了去掉url中的# 讓url看的正常點(diǎn)，會采用 vue-router mode: 'history' 模式

但是卻遇到了以下問題（希望后來者避之）

1、開啟HTML5 History Mode后，尤其需要server端的支持 node 后端已按 官方文檔增加了相應(yīng)配置

初步現(xiàn)象以及問題：側(cè)邊欄點(diǎn)擊時 會造成刷新頁面，體驗糟糕。
查看了項目源代碼和對比官方文檔

以下是項目源代碼：

router 目錄下 index.js

采用業(yè)務(wù)路由分離原則 將各個不同功能的路由給分離到不同文件中

import Vue from 'vue'
import Router from 'vue-router'
import {Index,Login,Message,User,HintPage2} from './user'
import Credits from './credits'
import Lottery from './lottery'
import Activity from './activity'
import ImgUpload from './imgUpload'
import SignUpActivity from './signUpActivity'

Vue.use(Router);

export default new Router({
      mode : "history",
      routes:[
            Index,
            Login,
            Message,
            Lottery,
            HintPage2,
            Credits,
            User,
            Activity,
            ImgUpload,
            SignUpActivity
      ]
});

取其中一個子業(yè)務(wù)舉例：activity.js

const index = () => import(/* webpackChunkName: "index" */ '../view/index');
const ActivityList = () => import(/* webpackChunkName: "addActivities" */ '../view/activity/activityList');
const AddActivity = () => import(/* webpackChunkName: "addActivity" */ '../view/activity/addActivity');
const ActiveUserList = () => import(/* webpackChunkName: "activeUserList" */ '../view/activity/activeUserList');
export default {
    path: '/activity',
    name: '專題活動',
    component: index,
    children: [  //這里就是二級路由的配置
        {
            path: '/activity/activityList',
            name: '活動列表',
            component: ActivityList
        },
        {
            path: '/activity/addActivity',
            name: '添加活動',
            component: AddActivity
        },
        {
            path: '/activity/activeUserList',
            name: '留言列表',
            component: ActiveUserList
        }
    ]
}

組件 側(cè)邊欄sidebar.vue 只取路由部分

采用router-link 跳轉(zhuǎn)路由方式

<router-link v-for="(item ,i) in list.pathTo" :to=item.path  :key="item.text">
    <MenuItem :name="item.name">
        <span class="layout-text">{{item.text}}</span>
    </MenuItem>
</router-link>

借用官網(wǎng)一段話

<router-link> 比起寫死的 <a href="..."> 會好一些，理由如下：

無論是 HTML5 history 模式還是 hash 模式，它的表現(xiàn)行為一致，所以，當(dāng)你要切換路由模式，或者在 IE9 降級使用 hash 模式，無須作任何變動。

【在HTML5 history 模式下，router-link 會守衛(wèi)點(diǎn)擊事件，讓瀏覽器不再重新加載頁面。】

當(dāng)你在 HTML5 history 模式下使用 base 選項之后，所有的 to 屬性都不需要寫（基路徑）了。

加粗的括號這句 是重點(diǎn)， 但是為什么我的現(xiàn)象并不是這樣的呢？

2、應(yīng)在項目中大量用到了window.location.href 跳轉(zhuǎn)方式， 這種方式也同樣導(dǎo)致了頁面跳轉(zhuǎn)刷新頁面

所以 修改項目跳轉(zhuǎn)方式

處理了以下代碼：

main.js

Vue.use(router); 
修改為 
Vue.prototype.router = router;

各個業(yè)務(wù)頁面中 采用 以下跳轉(zhuǎn)方式

this.router.push("/activity/activeUserList");

修復(fù)了頁面內(nèi)部的js 跳轉(zhuǎn)不刷新頁面【解決】

因此只剩一個側(cè)邊欄路由跳轉(zhuǎn)刷新頁面問題需要解決了，希望有過同樣以及類似經(jīng)驗的提供下問題原因和解決思路