vue3安装路由（router）

最新推荐文章于 2025-03-13 13:05:09 发布

前端小趴菜05

最新推荐文章于 2025-03-13 13:05:09 发布

阅读量2.6k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_68716504/article/details/134115871

版权

本文介绍了如何在Vue项目中安装和配置vue-router，包括不同版本的选择、创建和配置router文件、在main.ts中引用并注册以及在app.vue中添加router-view。详细步骤帮助开发者快速上手路由功能。

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

一、安装路由

1.安装vue-router

vue3需要安装4.0以上版本

vue2最好安装4.0以下版本

安装命令：

npm install vue-router@next --save // 安装最新版本router
 
// 如需按版本安装，需将命令行中 next 改成相应的版本。如下：
// npm install vue-router@4.0.13 --save

安装完成后，可在package.json中查看vue-router是否安装成

二、配置router文件

src目录下新建一个router文件夹，在router文件夹里新建一个index.ts文件，代码如下:

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 
// 1. 配置路由
const routes: Array<RouteRecordRaw> = [
  {
    path: "/", // 默认路由 home页面
    component: () => import("../views/home/index.vue"),
  },
 
];
// 2.返回一个 router 实列，为函数，配置 history 模式
const router = createRouter({
  history: createWebHistory(),
  routes,
});
 
// 3.导出路由   去 main.ts 注册 router.ts
export default router

三、在main.ts中引用router下的index.ts 进行配置

main.ts中代码如下：

import { createApp } from 'vue' // 安装unplugin-auto-import 可注释
import App from './App.vue'
import router from "./router/index" // 引入router
 
const app = createApp(App)
app.use(router)
    .mount('#app')

四、app.vue中添加路由组件router-view

<script setup lang="ts">
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>
</style>

此时：路由就配置好了，路由的默认跳转就可以了，项目启动之后，就会跳转到第二步骤配置的home页面。