程序设计实验室
·
StarBlog博客Vue前端开发笔记：(2)页面路由 - 程序设计实验室
💡
原文中文，约3800字，阅读约需9分钟。
📝
内容提要
Vue.js 使用虚拟 DOM 和 Webpack 打包成单页面应用，结合 vue-router 实现灵活的页面跳转，支持 hash 和 history 模式，方便开发者管理页面结构和导航。
🎯
关键要点
- Vue.js 使用虚拟 DOM 和 Webpack 打包成单页面应用。
- Vue.js 程序打包后生成一个单一的 HTML 文件和一个 JavaScript 文件。
- Vue.js 提供 vue-router 实现灵活的页面跳转，支持 hash 和 history 模式。
- Vue Router 是官方为 Vue.js 提供的路由管理器，支持组件化路由定义。
- vue-router 主要功能包括灵活的路由定义、简洁的组件化配置、多种模式选择、平滑的过渡动画、细粒度的导航控制和个性化体验。
- vue-router 有两种模式：hash 模式和 history 模式，hash 模式是默认模式。
- hash 模式通过 URL 的哈希值变化来实现路由跳转，history 模式使用 HTML5 的 history API。
- hash 模式无需后端配置，兼容性好，而 history 模式需要后端配置以处理未匹配的资源。
- 项目目录结构中需要添加 Login.vue、Home.vue 和 404.vue 页面。
- 配置 vue-router 时需要在 router 目录下新建 index.js 文件，设置路由和模式。
- 测试页面时可以通过不同的 URL 访问不同的组件。
➡️
