vue路由router文件添加组件

最新推荐文章于 2024-06-04 23:08:22 发布

蓝鲸是鱼

最新推荐文章于 2024-06-04 23:08:22 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_25367937/article/details/108211329

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在 Vue CLI 中如何在 router 文件夹下的 index.js 文件中配置路由，包括两种添加组件的方式：1) 直接导入组件并在 const routes 中定义；2) 使用懒加载组件，提高应用的加载效率。详细展示了每种方法的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli中路由文件以前是router.vue，现在是在router文件夹下的index.js
添加component的两种方式
1、在文件开始处import组件，并在const routes添加组件信息
import { createRouter, createWebHashHistory } from “vue-router”;
import Home from “…/views/Home.vue”;
import Login from “…/views/Login/index.vue”;

const routes = [
{
path: “/”,
name: “Home”,
component: Home
},
{
path: “/login”,
name: “Login”,
component: Login
},
{
path: “/about”,
name: “About”,
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: “about” */ “…/views/About.vue”)
}
];

const router = createRouter({
history: createWebHashHistory(),
routes
});

export default router;

2、通过懒加载组件，比较方便快捷，文件开始处不需import
import { createRouter, createWebHashHistory } from “vue-router”;
import Home from “…/views/Home.vue”;

const routes = [
{
path: “/”,
name: “Home”,
component: Home
},
{
path: “/login”,
name: “Login”,
component: import("…/views/About.vue")
},
{
path: “/about”,
name: “About”,
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: “about” */ “…/views/About.vue”)
}
];