DEV Community
·
Vue.js 初学者指南 2024 #VueJs 第5部分：使用 Vue Router 完整路由指南
💡
原文英文，约500词，阅读约需2分钟。
📝
内容提要
Vue Router是Vue.js的官方路由管理库，用于创建单页应用，实现无刷新页面导航。安装后需配置路由文件（如router.js），定义路径和组件，并在main.js中集成到Vue实例中。使用`<router-link>`进行导航，`<router-view>`显示匹配组件。通过创建Home.vue和About.vue，用户可点击链接进行导航。
🎯
关键要点
- Vue Router是Vue.js的官方路由管理库，用于创建单页应用，实现无刷新页面导航。
- 安装Vue Router后，需要配置路由文件（如router.js），定义路径和组件。
- 在main.js中将路由集成到Vue实例中。
- 使用<router-link>组件进行页面导航，<router-view>用于显示匹配的组件。
- 创建Home.vue和About.vue组件，用户可以通过链接进行导航。
- 运行应用程序的命令是npm run serve，并在浏览器中访问http://localhost:8080。
- 本文介绍了Vue.js中使用Vue Router进行路由的基础知识，后续将探讨更高级的功能。
❓
延伸问答
Vue Router是什么？
Vue Router是Vue.js的官方路由管理库，用于创建单页应用，实现无刷新页面导航。
如何安装Vue Router？
可以通过Vue CLI在创建新项目时选择安装，或者使用命令npm install vue-router进行安装。
如何配置Vue Router？
需要创建一个router.js文件，定义路径和组件，并在main.js中将路由集成到Vue实例中。
如何在Vue应用中使用<router-link>进行导航？
在App.vue文件中使用<router-link>组件，指定to属性为目标路径，例如<router-link to="/">Home</router-link>。
如何创建新的页面组件？
可以创建Home.vue和About.vue组件，分别定义其模板和脚本，作为路由的目标组件。
如何运行Vue应用程序？
使用命令npm run serve运行应用程序，然后在浏览器中访问http://localhost:8080。
➡️
