一              、安装路由

       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 ./style.css import App from ./App.vue import { createPinia } from pinia // 引入pinia import router from "./router/index" // 引入router const app = createApp(App) app.use(createPinia()) .use(router) .mount(#app)

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

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

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

 示例代码：

 页面示例：