基于官网的Vue-router安装(2024/11)

!!!首先声明,官网很重要。其次,不知道为啥,我不会安装时看不懂官网,会了之后就能看懂了。

官网地址:https://router.vuejs.org/zh/guide/

1.npm安装

npm install vue-router@4

官方貌似没有ts的安装教程,不过ts兼容js,所以不影响。

2.配置

1.这是官方给的(懂的都懂,不懂的目前不需要懂,官网复制下来就行)

2.我的配置:

在src里建一个router文件夹里面建一个index.ts,将官网复制的粘贴上去,

我这里是自己的项目所以俩个vue文件名和官网不一样,你可以按照官网的文件名建两个vue文件,里面分别写上一些,能区分是哪个vue文件的简单内容。

3.导入

1.在App.vue里写入router-view。

也可以以是RouterView,因为组件的名字可以是 PascalCase 风格或 kebab-case 风格的。

RouterView组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。

2.在main.ts里导入,以及使用。

4.测试

npm run dev运行后,关注游览器的地址栏,此时是第一个页面,手动填入path(我的话是填入/index,官网的话是/about),跳转到第二个界面。说明安装成功了。

相关推荐
Penge6665 小时前
前端基础:html语义化
前端
用户30816998764856 小时前
同一个端口能被两个程序监听吗?TCP 11 组绑定实测
前端
deli0076 小时前
红绿灯配时实测:固定 60 秒 vs 自适应,2400 辆车差多少
前端
去伪存真6 小时前
井道无信号、满手黑机油,我们如何用 DeepSeek V4 打造不“犯浑”的电梯维保 Agent?
前端·agent
deli0076 小时前
60fps 为什么还是一顿一顿?帧时间曲线实测给你看
前端
时间的情敌6 小时前
Cesium 流动管线、管道动画、管线流向仿真,管网、油气、水利孪生高频需求
前端·交互·cesium
yuyuxun16 小时前
协同过滤的校园二手物品智能推荐系统的设计与实现 毕业设计-附源码40082
javascript·vue.js·spring boot·python·数据分析·django·课程设计
wangxiaoxuan2178 小时前
SLAM 的基本结构:前端、后端、回环与地图优化
前端·机器人·科沃斯八界
Agent世界11 小时前
用 CDP 做发布自动化:四道机器闸门与产物验收
前端·javascript
FungLeo11 小时前
成为全栈·Vue 管理后台篇·编辑器图片上传:从文件选择到文章附件关联
前端·vue.js·编辑器·markdown·文件上传·formdata·附件管理