vue3+ts:安装路由（router）(vue路由使用方法)

编辑：rootadmin

vue3+ts:安装路由（router）一、安装路由

推荐整理分享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 vue3+ts:安装路由（router）(vue路由使用方法)

安装完成后，在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.ts

main.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页面。

示例代码：

页面示例：

本文链接地址:https://www.jiuchutong.com/zhishi/299098.html 转载请保留说明！

上一篇：webpack -v报错：Cannot find module ‘webpack-cli/package.json‘(webpack devserver contentbase)

下一篇：Unity iOS打包发布流程(unity怎么打包unitypackage)