正确使用方式
router-index.js
const router = new VueRouter({
mode: 'history',
routes: [...],
})
在路由的文件中添加mode: 'history',
这行代码就就是更改为history
模式,但是打包发布后,页面会出现一片空白。
如果创建的项目放到了根目录的话,不会出现这种问题。但一般情况下都不会放在根目录下,而是放在了子文件夹下面,此时你需要向后台询问子文件夹的名称,假如名称是ecm
,那么你需要在路由中做以下配置。
router-index.js
const router = new VueRouter({
base: '/ecm', // 基础路径
mode: 'history',
routes: [...],
})
添加完base: '/ecm',
的设置后,访问路径会在后面多出/ecm
,比如https://www.baidu.com/ecm
。之前访问页面空白的原因则是因为路径不对,请求不到资源。