第三十八篇:vue3路由
2024-09-08 08:57:51
好家伙,水博客怎么说
1.0.安装:简简单单的淘宝镜像安装
装一下淘宝镜像(一般都有)
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后装router
cnpm install vue-router@4 //vue3用版本router4
2.路由语法
//写在router.js中src目录下 inport {createRouter} from "vue-router"; //方法createRouter:创建一个路由 const router = createRouter(); //创建路由 export dafault router; //暴露router
3.改一下
// main.js下 creatApp(App).mount('#app') 把他拆开(就多加一个变量) const app = creatApp(App) mount('#app')
4.引用router(语法大概和vue2差不多)
//还是在main.js下 import router from "./router.js" const app = creatApp(App) app.use(router); mount('#app')
5.开始设置路由
// 在router.js中src目录下 inport { createRouter,createWebHashHistory} from "vue-router"; // improt <组件名> from "./路径1"
improt <组件名> from "./路径2" const router = createRouter({
routes:[{
path:"/",
component:<组件名>
},
{
path:"/123",
component:<组件名>
}]
}); //创建路由 export dafault router; //暴露router
6.app.vue中
//依旧是那两个:1.点击跳转路径, 2.组件视图 <router-link to="/123">首页</router-link>
<router-view></router-view>
然后就能点击跳转了,
就这么多了
最新文章
- webServer-----Spring 集成cxf笔录
- Page Object Model (Selenium, Python)
- 创建sh文件
- 从零学习IOS-VirtualBox-4.3.20-96997-Win
- java main函数不执行?
- 持续集成环境(Gitlab+jenkins+shell)
- 如何区分MNO和MVNO
- OData.NET已在 GitHub上开源
- 导弹拦截(pascal)
- ASP.NET CORE MVC 实现减号分隔(Kebab case)样式的 URL
- [C#]使用 Jenkins 为 .Net Core 实现持续集成/部署
- BZOJ4241 历史研究 莫队 堆
- 005-四种常见的 POST 提交数据方式
- HDU1698:Just a Hook(线段树区域更新模板题)
- CentOS 7 开放3306端口访问
- NC二次开发常用的方法
- [MFC]选择目录对话框和选择文件对话框
- dbms_stats应用相关
- Prism技术开发文档(五星级)
- JVM原理(Java代码编译和执行的整个过程+JVM内存管理及垃圾回收机制)
热门文章
- Linux常用命令-创建用户修改密码-useradd
- HDLBits->;Circuits->;Multiplexers->;Mux256to1v
- POI导出复杂Excel,合并单元格(1)
- 本地拉取服务器上的项目,SVN 由于目标计算机积极拒绝 无法连接失败
- NC24866 [USACO 2009 Dec S]Music Notes
- 本地使用 Docker Compose 与 Nestjs 快速构建基于 Dapr 的 Redis 发布/订阅分布式应用
- Gorgerous -「歌词」留言板
- Office共享协作方法——Office共享的正确打开方式、office365白嫖
- 快速新建并配置一个eslint+prettier+husky+commitlint+vue3+vite+ts+pnpm的项目
- vant自动上传图片/文件