项目导入 Vue Router 4 依赖包流程
作者:互联网
下载 Vue Router 4 的依赖包:
npm install vue-router@4
新建 router.ts 文件,导入 createRouter 以及 createWebHashHistory 函数:
import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [
{
path: "/",
name: "Home",
component: () => import("./components/Home.vue")
},
];
const router = createRouter({
history: createWebHashHistory("/"),
routes,
});
export default router;
createRouter()
必须传入一个对象,对象的接口是 RouterOptions,有 history 以及 routes 两个必要的字段。配置路由组件就是 routes 这一字段,基本就是路由组件的 URL 路径以及 component,name 不是必须的。
在 main.ts 文件中导入新建的路由文件,Vue use()
函数加载路由插件:
import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";
createApp(App)
.use(router)
.mount("body");
标签:Vue,vue,router,createRouter,导入,import,routes,Router,路由 来源: https://www.cnblogs.com/shiramashiro/p/16534058.html