位置: IT常识 - 正文
vue3+ts:安装路由（router）(vue路由使用方法)
编辑：rootadminvue3+ts:安装路由（router） 一、安装路由
本文链接地址:https://www.jiuchutong.com/zhishi/299098.html
转载请保留说明！
推荐整理分享vue3+ts:安装路由（router）(vue路由使用方法)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue如何配置路由,vuecli3路由配置,vuecli3路由配置,安装vue-router,vuecli3路由配置,vue如何配置路由,安装vue-router,vue 路由安装,内容如对您有帮助，希望把文章链接给更多的朋友！
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.tsexport default router三、在main.ts中引用router下的index.tsmain.ts中代码如下：
// import { createApp } from 'vue' // 安装unplugin-auto-import 可注释import './style.css'import App from './App.vue'import { createPinia } from 'pinia' // 引入piniaimport router from "./router/index" // 引入routerconst app = createApp(App)app.use(createPinia()) .use(router) .mount('#app') 四、app.vue中添加路由组件router-view<template> <router-view></router-view></template>此时：路由的默认跳转就可以了，项目启动之后，就会跳转到第二步骤配置的home页面。
示例代码：
页面示例：
上一篇：webpack -v报错：Cannot find module ‘webpack-cli/package.json‘(webpack devserver contentbase)
下一篇：Unity iOS打包发布流程(unity怎么打包unitypackage)
