前端路由的核心:改变 URL,但是页面不进行整体的刷新
)URL 的 hash
URL 的 hash 也就是锚点(#),本质上是改变 window.location.href
属性
我们可以通过直接赋值 location.hash
来改变 href,但是页面不发生刷新
)HTML5 的 history 模式(5 种)
history 接口是 HTML5 新增的,它有五种模式改变 URL 而不刷新页面
history.pushState()
history.replaceState()
history.go()
补充:
history.back()
等价于 history.go(-1)
history.forward()
等价于 history.go(1)
这几个接口等同于浏览器界面的前进后退
=============================================================================
目前前端流行的三大框架,都有自己的路由实现:
- Angular 的 ngRouter
- React 的 ReactRouter
- Vue 的 vue-router
vue-router 是 Vue.js 官方的路由插件,它和 Vue.js 是深度集成的,适合用于构建单页面应用
vue-router 官方网站: https://router.vuejs.org/zh/
vue-router 是基于路由和组件的
路由用于设定访问路径,将路径和组件映射起来
在 vue-router 的单页面应用中,页面的路径的改变就是组件的切换.
我们已经学习了 webpack,后续开发中我们主要是通过工程化的方式进行开发的
安装 vue-router
在模块化工程中使用它(因为是一个插件,所以可以通过 Vue.use()
来安装路由功能)
导入路由对象,并且调用 Vue.use(VueRouter)
创建路由实例,并且传入路由映射配置
在 Vue 实例中挂载创建的路由实例
使用 vue-router 的步骤:
创建路由组件
配置路由映射: 组件和路径映射关系
使用路由:通过 <router-link>
和 <router-view>
路由的配置一般不需要自行配置,脚手架中都配好了,着重关注路由的使用。
<router-link>
:该标签是一个 vue-router 中内置的组件,它会被渲染成一个<a>
标签
<router-view>
:该标签会根据当前的路径,动态渲染出不同的组件
网页的其他内容,比如顶部的标题 / 导航,或者底部的一些版权信息等会和 <router-view>
处于同一个等级
在路由切换时,切换的是 <router-view>
挂载的组件,其他内容不会发生改变
路由使用效果:
)路由的默认路径
默认情况下,进入网站的首页,我们希望 <router-view>
渲染首页的内容
如何可以让路径默认跳到到首页, 并且 <router-view>
渲染首页组件呢?
在路由配置中配置对 '/'
路径的映射,redirect 是重定向
)HTML5 的 History 模式
我们前面说过改变路径的方式有两种:
URL 的 hash
HTML5 的 history
默认情况下,路径的改变使用的 URL 的 hash
可以通过配置使用 HTML5 的 History 模式,参考官方文档
官方解释:当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
路由懒加载的主要作用就是:将路由对应的组件打包成一个个的 js 代码块,只有在这个路由被访问到的时候,才加载对应的组件。
路由懒加载的效果:
代码中懒加载的方式:
嵌套路由是一个很常见的功能,
比如在 home 页面中,希望通过 /home/news 和 /home/message 访问一些内容
一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件
实现嵌套路由的两个步骤:
创建对应的子组件,并且在路由映射中配置对应的子路由
在组件内部使用 <router-view>
标签
嵌套路由示例:
定义两个组件
使用 router-link 和 router-view 展示子组件
配置路由
展示效果
)嵌套路由默认路径
嵌套路由也可以配置默认的路径,配置方式如下:
传递参数主要有两种类型:params 和 query
params 的类型:
配置路由格式:/router/:id
传递的方式:在 path 后面跟上对应的值
传递后形成的路径:/router/123
,/router/abc
query 的类型:
配置路由格式:/router
,也就是普通配置
传递的方式:对象中使用 query 的 key 作为传递方式
传递后形成的路径:/router?id=123
,/router?id=abc
两种使用方式:
<router-link>
JavaScript 代码方式
获取参数通过 $route
对象获取的
在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route
,并且当路由切换时,路由对象会被更新。
通过 $route
获取传递的信息如下:
$route
和$router
的区别:
$router
为 VueRouter 实例,想要导航到不同 URL,使用$router.push
方法
$route
为当前 router 跳转对象,里面可以获取 name、path、query、params 等
面试成功其实都是必然发生的事情,因为在此之前我做足了充分的准备工作,不单单是纯粹的刷题,更多的还会去刷一些Java核心架构进阶知识点,比如:JVM、高并发、多线程、缓存、Spring相关、分布式、微服务、RPC、网络、设计模式、MQ、Redis、MySQL、设计模式、负载均衡、算法、数据结构、kafka、ZK、集群等。而这些也全被整理浓缩到了一份pdf——《Java核心架构进阶知识点整理》,全部都是精华中的精华,本着共赢的心态,好东西自然也是要分享的
内容颇多,篇幅却有限,这就不在过多的介绍了,大家可根据以上截图自行脑补,不过这份《Java核心架构进阶知识点整理pdf》以及前面P8整理的全套系列大厂面试题皆可免费分享给有需要的你,点击这里即可免费领取文中所有资料