vue学习-路由入门
2021/10/24 6:17:21
本文主要是介绍vue学习-路由入门,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1. 安装
vue本身没有整合路由,是使用的vuer-router
npm install vue-router@4
2. 使用
router.js
可以使用嵌套路由,嵌套父组件也需要router-view
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import { createRouter, createWebHistory } from "vue-router"; import Ha from "./components/Ha.vue"; import Hb from "./components/Hb.vue"; // 3. 创建路由实例并传递 `routes` 配置 export const router = createRouter({ // 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。 history: createWebHistory(), routes: [ { path: "", component: Ha }, { path: "/a", component: Ha }, { path: "/b", component: Hb }, // { // path: '/users/:username', // component: User, // children: [ // { path: 'posts', component: UserPosts }, // ], // }, ], }); |
main.js
use(router),使用router.js导出的router配置
1 2 3 4 5 6 | import { createApp } from "vue"; import App from "./App.vue"; import { router } from "./router"; const app = createApp(App).use(router); app.mount("#app"); |
App.vue
router-view 将显示与 url 对应的组件。你可以把它放在任何地方,以适应你的布局
router-link类似a标签,使用它可以Vue Router 可以在不重新加载页面的情况下更改 URL,处理 URL 的生成以及编码
1 2 3 4 5 6 7 8 | < template > < router-link to = "/a" >a组件</ router-link > < router-link to = "/b" >b组件</ router-link > < div id = "rightPart" > < router-view ></ router-view > </ div > </ template > |
这篇关于vue学习-路由入门的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
原文链接: https://blog.csdn.net/Rulelur/article/details/120928277
- 2025-01-152025年React技术栈全解:构建现代应用的必备工具集
- 2025-01-15React小白入门基础知识
- 2025-01-15订阅已过时:RxJs 中 .subscribe() 的新用法
- 2025-01-15为什么我决定在2025年不再使用React.js了
- 2025-01-13【JS逆向百例】某盾 Blackbox 算法逆向分析
- 2025-01-04React 19 来了!新的编译器简直太棒了!
- 2025-01-032025年Node.js与PHP大比拼:挑选最适合的后端技术进行现代web开发
- 2025-01-03?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??
- 2024-12-31Vue CLI多环境配置学习入门
- 2024-12-31Vue CLI学习入门:一步一步搭建你的第一个Vue项目