Some problems in vue history mode

The

vue project uses the vue-router mode: "history" mode in order to remove the-sharp from url so that url can see it as normal.

but encountered the following problems (I hope the newcomers will avoid them)

1. When HTML5 History Mode is enabled, the node backend especially needs server support. The node backend has been configured according to official document and the corresponding configuration has been added < / server >.
preliminary phenomenon and problem: when the sidebar is clicked, the page will be refreshed and the experience will be bad.
viewed the project source code and compared the official documentation

the following is the project source code:

index.js under the router directory
 

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
      ]
});
take one of the sub-businesses as an example: 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
        }
    ]
}
component sidebar sidebar.vue takes only the routing part
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>
borrow a passage from the official website
<router-link>  <a href="..."> :

 HTML5 history  hash  IE9  hash 

HTML5 history router-link 

 HTML5 history  base  to 
bold parentheses is the point, but why is my phenomenon not like this?

2. Window.location.href jump method is widely used in the project, which also leads to page jump and refresh page
.
so modify the project jump mode

handled the following code:

main.js
Vue.use(router); 
 
Vue.prototype.router = router;
the following jump methods are used in each business page
this.router.push("/activity/activeUserList");
fixed js jump inside the page without refreshing the page [resolve]

therefore, there is only one sidebar route jump refresh page problem to be solved. I hope to have the same and similar experience to provide the cause of the problem and solutions