认识路由
什么是路由?
维基百科的解释:路由(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-alivehttps://blog.csdn.net/notChange/article/details/123179172vue2.x 路由TabBar练习_notChange的博客-CSDN博客结合路由实现TabBar组件的封装
https://blog.csdn.net/notChange/article/details/123250086PS:文中的画图为自己理解,有不对的地方欢迎指正