【Vue(2)，Java面试编程题算法

补充：

• 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 

在模块化工程中使用它（因为是一个插件，所以可以通过 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')) })}; 

• 方式二：AMD 写法

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

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

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

嵌套路由

---

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

• 比如在 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 等

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210721103830550.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDA5NQ==,size_16,color_FFFFFF,t_70)

导航守卫

---

考虑一个需求：在一个SPA应用中，如何改变网页的标题呢？

• 网页标题是通过 <title> 来显示的，但是 SPA 只有一个固定的 HTML，切换不同的页面时，标题并不会改变

• 但是我们可以通过 JavaScript 来修改 <title> 的内容

  window.document.title = '新的标题'

• 那么在 Vue 项目中，在哪里修改？什么时候修改比较合适呢？

普通的修改方式：

• 我们比较容易想到的修改标题的位置是每一个路由对应的组件 .vue 文件中

• 通过 mounted 声明周期函数，执行对应的代码进行修改即可

• 但是当页面比较多时，这种方式不容易维护（因为需要在多个页面执行类似的代码）

以上问题可以使用导航守卫解决，什么是导航守卫?

• vue-router 提供的导航守卫主要用来监听监听路由的进入和离开的

• vue-router 提供了 beforeEach 和 afterEach 的钩子函数，它们会在路由即将改变前和改变后触发

---

我们可以利用 beforeEach 来完成标题的修改

• 首先，我们可以在钩子当中定义一些标题，可以利用 meta 来定义

  

• 其次，利用导航守卫，修改我们的标题

  

• 导航钩子的三个参数解析：

  to：即将要进入的目标的路由对象

  from：当前导航即将要离开的路由对象

  next：调用该方法后，才能进入下一个钩子

导航守卫注意点：

• 如果是后置钩子, 也就是 afterEach，不需要主动调用 next() 函数

• 上面我们使用的导航守卫，被称之为全局守卫

更多内容，可以查看官网进行学习：Vur Router 导航守卫

keep-alive

---

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染。

keep-alive 有两个非常重要的属性:

• include - 字符串或正则表达，只有匹配的组件会被缓存

• exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

router-view 如果直接被包在 keep-alive 里，所有路径匹配到的视图组件都会被缓存：