vite+vue3+ts中的vue-router基本配置

已于 2022-08-19 15:06:05 修改
阅读量4.9k 收藏 11
点赞数 1
分类专栏： vue3 前端 文章标签： vue.js 前端
于 2022-08-19 13:54:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51431448/article/details/126423161
版权
前端 同时被 2 个专栏收录
108 篇文章 3 订阅 ¥29.90 ¥99.00
订阅专栏 超级会员免费看
vue3
35 篇文章 0 订阅 ¥19.90 ¥99.00
订阅专栏 超级会员免费看

其实vue-router配置比较简单了，之前写过一篇非ts的配置：vite2 + vue3 中 vue-router4 基本使用(路由基本配置) 大家有兴趣可以看看，加上ts其实就是多了类型的约束，vue-router中已经给我们提供了RouteRecordRaw类型，可能我们需要在路由对象中自定义配置属性的时候就得去扩展一下RouteRecordRaw类型了，下面就介绍下

1. 首先安装 

npm i vue-router@4

2. 配置相关 

 ① 配置别名

vite.config.ts  

  

代码： 

import { defineConfig } from 'v
了解本专栏 订阅专栏 解锁全文 超级会员免费看
会说法语的猪
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
2.（vue3.x+vite）使用vue-router
GIS之家家长
11-24 417
2.（vue3.x+vite）使用vue-router
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+ts的Router使用教程
hetlm的博客
02-23 2717
vue3+ts Router的使用教程加注意事项
【Vite 】Vite 下配置 vue-router、vuex
最新发布
qq_35712802的博客
08-04 246
等待安装完成，没报错就行。
使用vite搭建vue3项目之集成vue-router（简单入门）
fuzhijieabc的博客
11-02 3601
使用vite搭建vue3并集成vue-router
vueRouter4.0+ts
BLUESKYHOST的博客
05-27 4634
准备工作 所需了解的vuex接口类 Module<S,R> module的类型 S 代表当前module的State类， R代表 createStore的State类 ActionContext<S,R> store上下文的类型 S 代表当前的State类， R代表 createStore的State类 StoreOptions 代表创建的Store类型 S 代表当前module的State类， 所需了解vuex的Store需要准备State类型 文件名 root-
Vue3 / Ts Router详解
热门推荐
Royzilong的博客
03-25 1万+
router/index.ts import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"; // 2. 配置路由 const routes: Array<RouteRecordRaw> = [ { path: "/login", component: () => import("../components/login.vue"), }, { path: "
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
在本项目中，我们探索了如何使用最新技术栈进行全栈开发，重点是前端的Vite3、Vue3、TypeScript以及Ant Design Vue3的整合，同时涉及后端的SpringBoot、MybatisPlus和MySQL。这是一个全面的实战教程，旨在帮助开发者...
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
【标题】"基于vite+vue3+pinia+element-plus+ts后台管理系统"是一个现代的前端开发框架，用于构建高效、可扩展的企业级后台管理界面。这个项目整合了多种前沿的技术，旨在提供一个功能全面、性能优异的解决方案，...
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
vite4.x+vue3.x项目搭建一vue-router
qq_36529240的博客
10-14 840
vite2.x+vue3.x项目搭建一vue-router
vue3 +TS 安装使用router路由模块
xhc6666的博客
01-08 1833
vue3 +TS 安装使用router路由模块,初步使用，后续进阶编写路由守卫
Vue3+Ts+Vite项目(第五篇)——配置router，实现路由跳转并完成路由模块化
做笔记/记录遇到的前端bug
07-09 6774
Vue3+TypeScript+Vite项目中，手摸手带你完成在Vue3项目中使用vue-router，并完成vue-router的模块化拆分
vue3+ts安装使用router
L_15737525552的博客
01-03 1578
4.main.ts中引入router。2.创建router文件。3.配置路由router。5.使用router跳转。接收params穿的参数。1.安装router。
vue3+ts 使用router
shoping110的博客
02-28 951
vue3+ts 使用router
[Vite+Vue3+TS] Router的使用
qq_45831414的博客
06-22 431
path模块是node.js内置的功能，但是node.js本身并不支持typescript，所以需要NPM下载插件。这会安装Vue Router的最新4.x版本，并将其添加到你的。的文件夹（如果尚未存在），并在该文件夹内创建一个。这将是你的路由配置文件。现在你可以在你的应用中使用。组件来创建导航链接，以及。来展示路由对应的组件。
Vue Router与Vite的无缝集成
偏执的小男孩儿
04-26 652
Vue Router与Vite的无缝集成
vue-router核心TS类型
Mercuryyjs的博客
07-31 1103
当用户通过浏览器的前进/后退按钮或者通过其他方式（如程序逻辑触发的导航）在不同的路由之间导航时，Vue Router 会利用浏览器的history的 API (history.pushState, history.replaceState) 来管理这些导航。就是Route实例对象的类型的基类型。当使用 router.push() 或 router.replace() 时传入的对象属性，这里只包含了部分。可以传入路由地址，可以传入布尔值，也可以传入一个回调函数，传入回调函数的场景很少用到。
vite+vue3+ts路由vue-router调接口
07-08
在 Vite + Vue 3 + TypeScript 的项目中，你可以使用 Vue Router 来处理路由，并调用接口。 首先，确保你已经安装了 Vue Router 和 axios（或其他用于发送 HTTP 请求的库）。你可以使用以下命令进行安装： ``` npm install vue-router axios ``` 接下来，在你的项目中创建一个 `router` 文件夹，并在其中创建一个 `index.ts` 文件。在该文件中，你可以配置你的路由。以下是一个示例： ```typescript import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'; import Home from '@/views/Home.vue'; import About from '@/views/About.vue'; const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 在上面的示例中，我们定义了两个路由：`Home` 和 `About`。你可以根据你的需求进行修改和扩展。 然后，在你的入口文件（如 `main.ts`）中，引入并使用你的路由： ```typescript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(router); app.mount('#app'); ``` 现在，你可以在你的组件中使用 `vue-router` 进行路由导航和调用接口。例如，在 `Home.vue` 组件中，你可以这样使用： ```vue <template> <div> <h1>Home</h1> <button @click="fetchData">Fetch Data</button> </div> </template> <script> import axios from 'axios'; export default { methods: { fetchData() { axios.get('/api/data').then((response) => { console.log(response.data); }).catch((error) => { console.error(error); }); }, }, }; </script> ``` 在上面的示例中，我们使用了 axios 发送 GET 请求来获取数据。你可以根据你的需求调整和扩展这个例子。 希望这能帮助到你！如果你有任何其他问题，请随时问我。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

会说法语的猪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值