vite 多页面配置 后如何使用 router
衔接上一篇文章,vite多页面配置后发现router不能正常使用,就很头痛,然后东找找西凑凑总算找到了解决方案,文章有点啰嗦,需要看配置区别的请直接到最后vite2中如何引入router这里不再详细描述,文章很多老配置App.vue中:<router-linkto="/index">路由-index</router-link><br/><router-li
衔接上一篇文章,vite多页面配置后发现router不能正常使用,就很头痛,然后东找找西凑凑总算找到了解决方案,文章有点啰嗦,需要看配置区别的请直接到最后
vite2中如何引入router这里不再详细描述,文章很多
老配置
App.vue中:
<router-link to="/index">路由-index</router-link><br/>
<router-link to="/test">路由-test</router-link><br/>
===========
<router-view>
</router-view>
===========
router.js配置:
import {createRouter, createWebHistory} from "vue-router";
// 路由信息
const routes = [
{
path: "/",
name: "index",
component: () => import('../views/index.vue'),
},
{
path: "/index",
name: "index",
component: () => import('../views/index.vue'),
},
{
path: "/test",
name: "test",
component: () => import('../views/test.vue'),
},
];
// 导出路由
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
出现的问题:
- 页面1地址为
http://localhost:3000/index/index.html/
,点击路由-test后,页面上显示出了对应的组件,但是地址被修改为了http://localhost:3000/test
- 地址被修改为了
http://localhost:3000/test
后,对页面进行回车刷新会找不到页面
解决历程:
网上找了很多搜索了很多也没有找到对应的方案,虽然猜测是router
配置原因但是当时并不知道如何解决,但是一次偶然机会发现createWebHistory
是可以写入参数的,修改后的配置
...
// 导出路由
const router = createRouter({
history: createWebHistory('/index/index.html'), // 具体字段根据不同页面所在地址进行配置
routes
});
...
修改过后第一个问题:页面1地址为http://localhost:3000/index/index.html/
,点击路由-test后,页面上显示出了对应的组件,而且地址也被修改为了http://localhost:3000/index/index.html/test
,
这样就解决了在多页面配置下,不同的页面能够使用不同的路由进行跳转,相应的router逻辑也可以使用
但是第二问题,地址跳转后再回车无法对页面进行刷新还是存在的,看了下当前地址http://localhost:3000/index/index.html/test
,猜想是否是地址拼接问题,router
有history
和hash
两种,如果换一换能否解决,查了相关的一些文章资料发现createWebHistory
可以修改为createWebHashHistory
,嘿嘿!~
修改后配置为:
import {createRouter, createWebHashHistory} from "vue-router";
...
// 导出路由
const router = createRouter({
history: createWebHashHistory('/index/index.html'), // 具体字段根据不同页面所在地址进行配置
routes
});
...
效果
没有gif,没有录屏,就只有文字描述了
原地址:http://localhost:3000/index/index.html#/
点击路由-index:http://localhost:3000/index/index.html#/index
点击路由-test:http://localhost:3000/index/index.html#/test
切换路由后,在url栏回车后也能刷新展示出当前页面
完美!
最终配置
其实只对history: createWebHashHistory("/index/index.html"),
进行了修改
import {createRouter, createWebHashHistory} from "vue-router";
// 路由信息
const routes = [
{
path: "/",
name: "index",
component: () => import('../views/index.vue'),
},
{
path: "/index",
name: "index",
component: () => import('../views/index.vue'),
},
{
path: "/test",
name: "test",
component: () => import('../views/test.vue'),
},
];
// 导出路由
const router = createRouter({
history: createWebHashHistory("/index/index.html"),
routes
});
export default router;
更多推荐
所有评论(0)