![在这里插入图片描述](https://s2.51cto.com/images/20210808/1628424256690507.jpg)

前端路由的核心：改变 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)

• 这几个接口等同于浏览器界面的前进后退

vue-router

=============================================================================

目前前端流行的三大框架，都有自己的路由实现：

• Angular 的 ngRouter

• React 的 ReactRouter

• Vue 的 vue-router

vue-router 是 Vue.js 官方的路由插件，它和 Vue.js 是深度集成的，适合用于构建单页面应用

vue-router 官方网站: https://router.vuejs.org/zh/

vue-router 是基于路由和组件的

• 路由用于设定访问路径，将路径和组件映射起来

• 在 vue-router 的单页面应用中，页面的路径的改变就是组件的切换.

安装和使用 vue-router

我们已经学习了 webpack，后续开发中我们主要是通过工程化的方式进行开发的

安装 vue-router

npm install vue-router --save


1.
2.
3.

在模块化工程中使用它（因为是一个插件，所以可以通过 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 代码块，只有在这个路由被访问到的时候，才加载对应的组件。

路由懒加载的效果：

代码中懒加载的方式：

• 方式一：结合 Vue 的异步组件和 Webpack 的代码分析

const Home = resolve => { require.ensure(['../components/Home.vue'],
() => { resolve(require('../components/Home.vue')) })};


1.
2.
3.
4.
5.

• 方式二：AMD 写法

const About = resolve => require(['../components/About.vue'], resolve);


1.
2.
3.

• 方式三：使用 ES6 语法来组织 Vue 异步组件和 Webpack 的代码分割

const Home = () => import('../components/Home.vue')


1.
2.
3.

嵌套路由

嵌套路由是一个很常见的功能，

• 比如在 home 页面中，希望通过 /home/news 和 /home/message 访问一些内容

• 一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件

  

实现嵌套路由的两个步骤：

• 创建对应的子组件，并且在路由映射中配置对应的子路由

• 在组件内部使用 <router-view> 标签

嵌套路由示例：

1. 定义两个组件

   

2. 使用 router-link 和 router-view 展示子组件

   

3. 配置路由

   

4. 展示效果

   

[](

)嵌套路由默认路径

嵌套路由也可以配置默认的路径，配置方式如下：

路由传递参数

传递参数主要有两种类型：params 和 query

params 的类型：

• 配置路由格式：/router/:id

• 传递的方式：在 path 后面跟上对应的值

• 传递后形成的路径：/router/123，/router/abc

query 的类型：

• 配置路由格式：/router，也就是普通配置

• 传递的方式：对象中使用 query 的 key 作为传递方式

• 传递后形成的路径：/router?id=123，/router?id=abc

两种使用方式：

• <router-link>

  

• JavaScript 代码方式

  

$route 获取参数

获取参数通过 $route 对象获取的

在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route，并且当路由切换时，路由对象会被更新。

通过 $route 获取传递的信息如下：

$route 和 $router 的区别：

• $router 为 VueRouter 实例，想要导航到不同 URL，使用 $router.push 方法

• $route 为当前 router 跳转对象，里面可以获取 name、path、query、params 等

最后分享一波，Java核心架构进阶知识点

面试成功其实都是必然发生的事情，因为在此之前我做足了充分的准备工作，不单单是纯粹的刷题，更多的还会去刷一些Java核心架构进阶知识点，比如：JVM、高并发、多线程、缓存、Spring相关、分布式、微服务、RPC、网络、设计模式、MQ、Redis、MySQL、设计模式、负载均衡、算法、数据结构、kafka、ZK、集群等。而这些也全被整理浓缩到了一份pdf——《Java核心架构进阶知识点整理》，全部都是精华中的精华，本着共赢的心态，好东西自然也是要分享的

内容颇多，篇幅却有限，这就不在过多的介绍了，大家可根据以上截图自行脑补，不过这份《Java核心架构进阶知识点整理pdf》以及前面P8整理的全套系列大厂面试题皆可免费分享给有需要的你，点击这里即可免费领取文中所有资料