vue 项目完成后部署上线发现后缀不美观问题

由于一些正规网址进入页面后是直接完整格式的

比如 百度网址 www.baidu.com

我们上线进入网址发现他有带后缀名比如：www.baidu.com/#/indexPage  (这个我乱写的！) 

那么如何隐藏或者 ‘去掉’ 后缀（/#/indexPage）呢

解决方案

进入vue项目，打开路由配置

先找到 const router = new VueRounter（{

        mode：“history”,        //去除默认的哈希模式（#）后的路径。

               .....其他代码

}）

这样就完成了一半 ===> www.baidu.com/indexPage

那么接下来如果  “处理掉”  /indexPage

redirect重定为 / ，让用户访问的时候直接是www.baidu.com，实际上路径是以 /indexPage 这个为主页（指向 indexPage ）

如果将redirect重定为 /indexPage 那么用户访问的就是这个==> www.baidu.com/indexPage

name: homePage（尽管组件被命名为 indexPage，这个自己取名）。

import Vue from "vue";
import VueRouter from "vue-router";
import homePage from "../views/homePage.vue";
import indexPage from "../views/indexPage.vue";
import aboutPage from "../views/aboutPage.vue";


Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    component: homePage,
    children: [
      { path: "/indexPage", redirect: "/" },// 用户访问 /indexPage 时，重定向到 / （变为）
      { path: "/", name: "homePage",component: indexPage },// 实际上将 indexPage 组件作为主页 
      { path: "indexPage", name: "indexPage", component: indexPage },
      { path: "aboutPage", name: "aboutPage", component: aboutPage }
    ],
  },
];

const router = new VueRouter({
  // mode: 'history',
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;