认识路由
什么是路由？
维基百科的解释：路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。
在生活中，最常听到的就是路由器，那路由器是做什么的呢？
路由器提供了两种机制：路由和转送
- 路由是决定数据包从来源到目的地的路径
- 转送将输入端的数据转移到合适的输出端
路由中有一个非常重要的概念叫路由表，本质上就是一个映射表，决定数据包的指向
后端路由阶段
早起的网站开发整个HTML页面是有服务器来渲染的
服务器直接生成渲染好的HTML页面返回给客户端展示
一个网站，那么多页面服务器如何处理呢？
- 一个页面有自己对应的网址，也就是URL
- URL发送到服务器，服务器通过正则对URL进行匹配，最后交给Controller处理
- Controller进行各种处理，最终生成HTML或数据，返回给前端
上面这种操作，就是后端路由
- 当页面中需要请求不同的路径内容时，交给服务器来进行处理，服务器渲染好整个页面返回至客户端
- 这种情况下渲染好的页面，不需要单独加载任何的js和css，直接交给浏览器展示
后端路由的缺点
- 一种情况是整个页面的模块有后端人员来编写和维护
- 另一种情况是前端开发人员如果要开发页面，需要通过PHP或Java等语言来编写页面代码
- 通常情况下HTML代码和数据以及对应的逻辑会混在一起，使编写和维护都很难
前端路由阶段
前后端分离阶段
- 随着Ajax的出现，有了前后端分离的开发模式
- 后端只提供API来返回数据，前端通过Ajax获取数据，并通过JavaScript将数据渲染到页面中
- 这样做最大的优点是前后端责任清晰，后端专注于数据上，前端专注于交互和可视化上
- 并且当移动端(IOS/Android)出现后，后端不需要进行任何处理，依然使用之前的API即可
单页面富应用阶段
- SPA最主要的特点就是在前后端分离的基础上加上了一层前端路由
- 也就是前端来维护一套路由规则
- 前端路由的核心是，改变URL，但是页面不进行整体刷新
前端路由的规则
URL的hash
URL的hash也就是锚点(#)，本质上是改变window.location的href属性
可以通过直接赋值location.hash来改变href，但页面不发生刷新
HTML5的history模式
pushState
往栈里追加内容，浏览器可前进后退
back、go、forward
history.back() 等价于 history.go(-1)
history.forward() 等价于 history.go(1)
这三个接口等同于浏览器界面的前进后退
replaceState
直接替换路径，不支持浏览器的前进后退
vue-router基础
认识vue-router
目前前端流行的三大框架，都有自己的路由实现
- Angular的ngRouter
- React的ReactRouter
- Vue的vue-router
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适用于构建单页面应用
vue-router是基于路由和组件的
- 路由用于设定访问路径，将路径和组件映射起来
- 在vue-router的单页面应用中，页面的路径改变就是组件的切换
安装和使用vue-router
安装vue-router
使用vue-cli创建项目时，可选择安装路由
使用命令安装 npm install vue-router --save
在模块化工程中使用它(因为是一个插件，可以通过Vue.use()来安装路由功能）
- 导入路由对象，并且调用 Vue.use(VueRouter)
- 创建路由实例，并且传入路由映射配置
- 在Vue实例中挂载创建的路由实例
// router文件夹下创建index.js文件
// 配置路由相关的信息
import VueRouter from "vue-router";
import Vue from "vue";
// 1.通过Vue.use(插件),安装插件
Vue.use(VueRouter);
// 2.创建VueRouter对象
const routes = []
const router = new VueRouter({
// 配置路由和组件之间的应用关系
routes
});
// 3.将router对象传入到Vue实例
export default router;
// main.js
// 导入路由实例 路径./router/index.js中index.js可以省略，默认找文件夹下的index.js文件
import router from './router'
new Vue({
el: '#app',
router,
render: h => h(App)
})使用vue-router的步骤
- 创建路由组件
- 配置路由映射：组件和路径映射关系
- 使用路由：通过 <router-link> 和 <router-view>
细节处理
路由的默认路径
默认情况下，进入网页，就希望看到首页的内容，但在上面的实现中，默认没有显示首页组件，必须让用户点击才可以，如何让路径默认跳到首页呢，只需要在配置中多一个映射就可以
配置解析：
- path配置的是根路径（内容："/" 或 ""）
- redirect是重定向，也就是讲根路径重定向到/home的路径下
HTML5的History模式
改变路径的方式有两种：URL的hash，HTML5的history。默认情况下，路径的改变使用URL的hash，如果希望使用HTML5的history模式，可以在路由实例中配置mode即可
const router = new VueRouter({
routes,
mode: "history",
});
router-link补充
在前面<router-link>中，使用了属性 to：用于指定跳转的路径
<router-link>中其他属性：
tag：tag可以指定<router-link>之后渲染成什么组件
replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中
active-class：当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称
- 在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类
- 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可
修改linkActiveClass
使用active-class修改class，每个都写很麻烦，可以通过router实例的属性进行修改
路由代码跳转
有时候，页面的跳转可能需要执行对应的JavaScript代码，这时候，就可以使用第二种跳转方式
动态路由
在某些情况下，页面的path路径可能是不确定的，比如进入用户界面，希望路径/user后跟上用户ID，如：/user/zhangsan 或 /user/lisi
这种path和Component的匹配关系，称之为动态路由(也是路由传递数据的一种方式)
路由相关笔记：
vue2.x笔记10-vue-router(2)_notChange的博客-CSDN博客本文主要内容：路由懒加载、路由嵌套、传递参数、导航守卫、keep-alive
https://blog.csdn.net/notChange/article/details/123179172vue2.x 路由TabBar练习_notChange的博客-CSDN博客结合路由实现TabBar组件的封装https://blog.csdn.net/notChange/article/details/123250086PS：文中的画图为自己理解，有不对的地方欢迎指正
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
