一、安装路由
1.安装vue-router
vue3需要安装4.0以上版本
vue2最好安装4.0以下版本
安装命令:
npm install vue-router@next --save // 安装最新版本router // 如需按版本安装,需将命令行中 next 改成相应的版本。如下: // npm install [email protected] --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("../components/login.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>
此时:路由的默认跳转就可以了,项目启动之后,就会跳转到第二步骤配置的login页面。
标签:vue,vue3,ts,import,router,安装,路由 From: https://www.cnblogs.com/fkcqwq/p/17239205.html