本文介绍了Vue2.0中前端路由的基本概念和工作原理，详细讲解了vue-router的安装配置、声明式导航、动态路由匹配、嵌套路由以及导航守卫的使用，包括路由重定向、子路由声明、编程式导航API如$router.push、$router.replace、$router.go等，以及全局前置守卫的实现，用于控制路由访问权限。
前端路由概念与原理
1.路由概念路由
（英文：router）就是对应关系。
2. SPA（单页面应用程序）与前端路由
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。
结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！
3.什么是前端路由
通俗易懂的概念：Hash 地址与组件之间的对应关系。
4.前端路由的工作方式
① 用户点击了页面上的路由链接
② 导致了 URL 地址栏中的 Hash 值发生了变化
③ 前端路由监听了到 Hash 地址的变化
④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中
- 结论：前端路由，指的是 Hash 地址与组件之间的对应关系！
5. 实现简易的前端路由
步骤1：通过 component 标签，结合 comName 动态渲染组件。示例代码如下：
步骤2：在 App.vue 组件中，为 链接添加对应的 hash 值：
步骤3：在 created 生命周期函数中，监听浏览器地址栏中 hash 地址的变化，动态切换要展示的组件的名称：
vue-router基本用法
1.vue-router概念
vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。
vue
最低0.47元/天 解锁文章
扫一扫
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
