vue history模式下的一些问题

Question

vue项目 为了去掉url中的# 让url看的正常点，会采用 vue-router mode: 'history' 模式

但是却遇到了以下问题（希望后来者避之）

1、开启HTML5 History Mode后，尤其需要server端的支持 node 后端已按 官方文档增加了相应配置

初步现象以及问题：侧边栏点击时 会造成刷新页面，体验糟糕。
查看了项目源代码和对比官方文档

以下是项目源代码：

router 目录下 index.js

采用业务路由分离原则 将各个不同功能的路由给分离到不同文件中

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
      ]
});

取其中一个子业务举例：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
        }
    ]
}

组件 侧边栏sidebar.vue 只取路由部分

采用router-link 跳转路由方式

<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>

借用官网一段话

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

无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 hash 模式，无须作任何变动。

【在HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。】

当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写（基路径）了。

加粗的括号这句 是重点， 但是为什么我的现象并不是这样的呢？

2、应在项目中大量用到了window.location.href 跳转方式， 这种方式也同样导致了页面跳转刷新页面

所以 修改项目跳转方式

处理了以下代码：

main.js

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

各个业务页面中 采用 以下跳转方式

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

修复了页面内部的js 跳转不刷新页面【解决】

因此只剩一个侧边栏路由跳转刷新页面问题需要解决了，希望有过同样以及类似经验的提供下问题原因和解决思路

Answer 1

侧边栏的用router-link来跳转