本文件为学习Vue框架第七天的学习内容总结,通过思维导图形式展示了当天所学的知识点与关键概念,便于复习和理解。
路由的概念:
1. 路由的本质是一种对应关系。当我们输入URL地址后,浏览器需要请求该URL对应的资源,此时URL与真实资源之间就存在一种映射关系(即为路由)。
2. 使用路由的优点包括:
- 页面整体不刷新,提升用户体验。
- 数据传递更加便捷,提高开发效率。
3. 路由涉及的三个核心概念:route、routes 和 router。其中 route 表示单个路径与组件之间的映射关系;routes 是多个 route 的集合;router 则是负责管理这些路由规则的对象。
Vue Router 使用步骤:
1. 在项目中安装 vue-router 模块。
2. 在 main.js 文件中引入 VueRouter 函数。
3. 将 VueRouter 注册为全局插件,以便使用其提供的组件 RouterLink 和 RouterView。
4. 创建路径与组件之间的映射规则数组(路由配置)。
5. 使用上述规则创建一个路由器实例。
6. 把生成的路由器对象注入到新的 Vue 实例中,使其生效。
7. 通过在页面模板中使用 标签作为挂载点来切换不同的视图。
Vue 路由导航:
1. 声明式导航
- vue-router 提供了一个全局组件 router-link。用户可通过点击该链接实现路由的跳转,而无需手动编写JavaScript代码进行页面的加载和转换。