vue3中，配合的vueRouter版本更改为vue-router-next
通过
npm i vue-router@next
的方式进行引入添加，随后创建 router.js，在main.js里面引入, 通过app.use(router)的方式进行使用;
import {createRouter, createWebHistory} from 'vue-router';
const history = createWebHistory();
const router = createRouter({
history,
routes: [
{
path: '/',
name: 'Home',
component: () => import('./views/Home/index.vue'),
},
{
path: '/cards',
name: 'Cards',
component: () => import('./views/Cards/index.vue'),
},
{
path: '/hello',
name: 'Hello',
component: () => import('./components/HelloWorld.vue'),
},
],
});
export default router;
这个模式
const history = createWebHistory();
和之前vue2对应的vueRouter版本通过mode:'hash',mode:'history',mode:'abstract'方式有所不同,在现阶段的网上的教程,没有说明vue3的hash模式如何开启,默认都是history模式
因此通过 localhost:8080/#/hello 或者
localhost:8080/#/cards 无法进入到对应的路由页面;
通过查看打印 vue-router-next 对外暴露的方法, 找到了vue-router-next版本下开启 hash模式的方法
import * as res from 'vue-router'; // 引入vueRouter所有暴露的方法并取别名 res
console.log(Object.keys(res)); // 将res所有属性的key值转成数组并打印
// ['NavigationFailureType', 'RouterLink', 'RouterView', 'START_LOCATION', 'createMemoryHistory', 'createRouter', 'createRouterMatcher', 'createWebHashHistory', 'createWebHistory', 'isNavigationFailure', 'onBeforeRouteLeave', 'onBeforeRouteUpdate', 'parseQuery', 'stringifyQuery', 'useLink', 'useRoute', 'useRouter'];
找到上面createWebHistory 相类似的API: createWebHistory createMemoryHistory createWebHashHistory 这三个正是我们想要的;
createWebHistory: 对应 mode:'history'
createWebHashHistory : 对应mnode:'hash'
createMemoryHistory: 这个是在内存中进行匹配, 对应的应该是 'abstract',
因此,将路由定义时候
const history = createWebHistory();
更改为
const history = createWebHashHistory();
就能达到原来vue2中对应的hash模式了
