vue3 路由创建

六加六呀

已于 2022-12-15 08:50:36 修改

阅读量861

点赞数 2

文章标签： vue.js javascript 前端

于 2022-08-20 09:00:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44761131/article/details/126420064

版权

本文档介绍了如何在Vue.js项目中设置和使用路由。首先，通过npm安装vue-router@4并保存为依赖。接着，在src目录下创建router文件夹，并在其中建立index.js，导入必要的路由组件并定义路由配置。然后，创建一个包含登录页面的路由。最后，将路由器挂载到main.js文件中，使路由生效。这样就成功地在Vue应用中实现了路由管理。

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

第一步安装路由

npm install vue-router@4 --save

第二步在src下创建一个路由文件夹router 文件夹中创建一个index.js

router->index.js

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    //登录页面
    path: "/login",
    name: "login",
    component: () => import(/*webpackChunkName:'Login'*/ "@/view/login.vue"),
  },
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

第三把它挂载到main.js文件中

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index.js";
const app = createApp(App);
app.use(router);
app.mount("#app");