vue-router

在这里插入图片描述

1 认识路由

1.1 前端路由阶段：

1.后端路由阶段
在这里插入图片描述

服务器端处理jsp代码，包括html+css+java代码（读取+渲染），直接传给浏览器进行展示。

后端路由：后端处理url和页面的映射关系。

2.前后端分离阶段
随着Ajax的出现,有了前后端分离的开发模式.
后端只提供API来返回数据,前端通过Ajax获取数据,并且可以通过JavaScript将数据渲染到页面中.
这样做最大的优点就是前后端责任的清晰,后端专注于数据上，前端专注于交互和可视化上.
并且当移动端(iOS/Android)出现后,后端不需要进行任何处理,依然使用之前的一套API即可.
目前很多的网站依然采用这种模式开发.
浏览器中显示的网页中的大部分内容,都是由前端写的js代码在浏览器中执行,最终渲染出来的网页.
后端只负责提供数据，不负责任何阶段内容。浏览器从静态资源服务器拿到html+css+js，执行js代码。向提供API接口服务的服务器请求，拿到数据。将数据相关的js代码渲染到浏览器中。

3.单页面富应用阶段:
其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由，也就是前端来维护一套路由规则。
一旦url发生改变，前端就去（html+css+js）全部资源抽取一部分js代码，把页面渲染出来。
前端路由：前端处理url和页面的映射关系。

1.2 前端路由核心的实现

前端路由的核心：改变URL，但是页面不进行整体的刷新。（F12的Network->All，观察是否有新文件的产生，“favicon.ico”文件忽略）。

1.3.1 实现方式1：url的hash

  • URL的hash也就是锚点(#),本质上是改变window.location的href属性.
  • 我们可以通过直接赋值location.hash来改变href,但是页面不发生刷新。
    在这里插入图片描述

1.3.2 html5的history模式

1.history.pushState()
特点：显示的url永远是最后压入栈的url。
点击浏览器的返回箭头，或者console控制台输入history.back()，会将栈顶移除掉，显示下一个栈顶的url。
浏览器的url显示如下：为什么会带#
在这里插入图片描述

在这里插入图片描述
2.history.replaceState()
特点：用输入的url替换最新的url。
返回按钮会灰掉，不可以点击。
浏览器显示如下：没有#
在这里插入图片描述
在这里插入图片描述
3.history.go()
history.go(-1)等价于history.back()
history.go(-2)等价于调用2次history.back()
history.go(1)等价于history.forward()
都等同于浏览器界面的前进后退箭头点击。

1.3 vue-router

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

  • Angular的ngRouter
  • React的ReactRouter
  • Vue的vue-router

vue-router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
可以访问官方网站进行学习：https://router.vuejs.org/zh/

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

  • 路由用于设定访问路径，将路径和组件映射起来.
  • 在vue-router的单页面应用中，页面的路径的改变就是组件的切换.

利用vue cli2创建项目，配置如下：
为啥要选runtime-only
在这里插入图片描述
观察创建的项目，src文件夹下会多一个router文件夹；package.json文件中的依赖，会多一个vue-router。

2 vue-router基本使用

2.1 安装

使用npm来安装路由vue-router：
npm install vue-router --save

2.2 基本使用

  • 搭建路由框架

    • 1.导入路由对象import VueRouter from 'vue-router'，导入vue对象import Vue from 'vue'，
    • 2.调用vue对象的方法，安装插件：Vue.use(VueRouter)
      (因为是一个插件,所以可以通过Vue.use(插件)来安装该插件)
    • 3.创建路由对象，并且配置路由映射配置。
    const router = new VueRouter({
	routes:[]
})
    • 4.导出路由对象export default router
    • 5.在Vue实例中挂载创建的路由实例
      注：import router的路径为一个文件夹，如果路径中设置的是文件夹，则默认查找该文件夹中名为index的文件。故文件名省略了。
      在这里插入图片描述

  • 配置路由的映射关系的步骤：

    • 第一步：创建路由组件（component文件夹下创建vue文件）
    • 第二步：router对象中的routes属性，配置组件和路径映射关系
    • 第三步:使用<router-link to:"/home">在页面上显示链接，to属性设置跳转路径
    • 第四步：使用<router-view>占位，展示组件内容

解释：
<router-link>:该标签是一个vue-router已经内置的组件,它会被渲染成一个<a>标签.
<router-view>:该标签会根据当前的路径,动态渲染出不同的组件.
网页的其他内容,比如顶部的标题/导航,或者底部的一些版权信息等会和<router-view>处于同一个等级.
在路由切换时,切换的是<router-view>挂载的组件,其他内容不会发生改变.

2.3 路由的默认路径

默认情况下，进入网站的首页，我们希望让路径默认跳到到首页,并且<router-view>渲染首页组件。
需要添加一个映射就可以。

const routes = [
	{
		path: '/',
		redirect: '/home'
	},

配置解析：
我们在routes中添加一个映射
path配置的是根路径：/
redirect是重定向,也就是我们将根路径重定向到/home的路径下.

2.4 设置html5的history模式

默认是hash模式，url中会有“#”，不太好看。需要设置为history模式。

const router = new VueRouter({
	//配置路由和组件之间的应用关系
	routes,
	mode: 'history'
})

2.5 router-link属性

<router-link>的属性：

  • to，用于指定跳转的路径.
  • tag，指定<router-link>之后渲染成什么组件，比如<router-link to='/home' tag='li'>会被渲染成一个<li>元素,而不是<a>
  • replace: replace不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上一个页面中
  • active-class：当<router-link>对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称.
    • 在进行高亮显示的导航菜单或者底部tabbar时,会使用到该类.
    • 通常不会修改类的属性,会直接使用默认的router-link-active即可.
    • 统一修改匹配的class名，可以在router对象中设置属性：linkActiveClass: ‘active’`

2.6 通过代码跳转路由

有时候,页面的跳转可能需要执行对应的JavaScript代码,这个时候,就可以使用第二种跳转方式了。

<template>
  <div id="app">
    <button @click="homeClick">首页</router-link>
    <button @click="aboutClick">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
  	homeClick() {
   	  //通过代码的方式修改路由
   	  this.$router.push('/home')
  	},
  	aboutClick() {
   	  //通过代码的方式修改路由
   	  this.$router.replace('/about')
  	}
  }
}
</script>

<style>

</style>

2.7 动态路由

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径∶
/user/aaaa或/user/bbbb
除了有前面的/user之外，后面还跟上了用户的ID
这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。

2.7.1 动态路由举例

点击“用户”，跳转至的页面与用户ID相关，是不确定的。跳转后的页面要能正常显示，渲染的组件是确定的。
在这里插入图片描述

  1. 新建User.vue组件文件

  2. router文件夹下的index.js文件，导入User，并且配置映射关系
    在这里插入图片描述

  3. Vue实例中设置userId变量，模板中设置<router-link>组件的to属性为‘/user/+userId’。因为userId需要访问实例中的变量，所以需要用到v-bind语法。
    在这里插入图片描述
    这里的userId是写在App.vue文件里的，为啥后面的computed属性UserId是写在User.vue文件里呢？
    可能是因为使用的位置不一样。

2.7.2 传递路径中的参数

在这里插入图片描述
其中：this.$route代表的是当前活跃的路由对象。
this.$route.params.userId中的userId与路由映射里的参数写一致。
，在这里插入图片描述
也可以不放在计算属性里，直接在模板中使用。这里不加this，可以这样理解：this.$route.params.userId取的是实例的data属性中的变量，故要加this，但是直接使用是不需要加的。
在这里插入图片描述

2.8 认识路由的懒加载

2.8.1 什么是路由懒加载

路由懒加载，就是用到时再加载。

官方解释:

  • 当打包构建应用时，Javascript包会变得非常大，影响页面加载。
  • 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

官方在说什么呢?

  • 首先,我们知道路由中通常会定义很多不同的页面.

  • 这个页面最后被打包在哪里呢?一般情况下,是放在一个js文件中.

  • 但是,页面这么多放在一个js文件中,必然会造成这个页面非常的大.

  • 如果我们一次性从服务器请求下来这个页面,可能需要花费一定的时间,甚至用户的电脑上还出现了短暂空白的情况.

  • 如何避免这种情况呢?使用路由懒加载就可以了.

路由懒加载做了什么?

  • 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块
  • 只有在这个路由被访问到的时候,才加载对应的组件

未使用懒加载，npm run build 打包文件的解析：
在这里插入图片描述
使用懒加载后，一个懒加载打包为一个js文件。

2.8.2 懒加载和非懒加载打包区别

在这里插入图片描述

2.8.3 懒加载的方式

方式1：结合Vue的异步组件和webpack的代码分析。
（能认识即可）
const Home = resolve => { require.ensure([ ' ../components/Home.vue']，() =>{ resolve(require( ' ../ components /Home.vue' )) })};

方式2：ADM写法
const About = resolve => require([ ' ../components/About.vue'],resolve);

方式3：在ES6中，我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.
const Home = () => import( '../components/Home. vue ' )

3 vue-router嵌套路由

3.1 认识嵌套路由

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

  • 比如在home页面中,我们希望通过/home/news和/home/message访问一些内容.
  • 一个路径映射一个组件，访问这两个路径也会分别渲染两个组件.

路径和组件的关系如下：
在这里插入图片描述

5.2 嵌套路由实现

实现嵌套路由的步骤：

  • 创建对应的子组件
  • 路由映射中配置对应的子路由
  • 在组件内部使用<router-view>标签，确定子组件显示的位置
    在这里插入图片描述
    注：子组件的path中不要加‘/’；路径写完整路径。

5.3 嵌套默认路径

嵌套路由配置默认路径的方式如下：
在这里插入图片描述

6 vue-router参数传递

6.1 准备工作

在这里插入图片描述

6.2 传递参数的方式

传递参数主要有两种类型:

  • params和query

params的类型:

  • 配置路由格式：/router/:id
  • 传递的方式：在path后面跟上对应的值
  • 传递后形成的路径： /router/123，/router/abc

query的类型:

  • 配置路由格式: /router，也就是普通配置
  • 传递的方式：对象中使用query的key作为传递方式传递后形成
  • 路径: /router?id=123，/router?id=abc

如何使用它们呢?
也有两种方式: <router-link>的方式和JavaScript代码方式

6.3 获取参数

获取参数通过$route对象获取的.
在使用了vue-router的应用中，路由对象会被注入每个组件中，赋值为this.$route，并且当路由切换时，路由对象会被更新。
通过$route获取传递的信息如下:
在这里插入图片描述
$route 和$router的区别：
$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
$route为当前router跳转对象里面可以获取name、path、query. params等
在这里插入图片描述

7 vue-router导航守卫keep-alive

7.1 作用

导航首位补充

补充一：如果是后置钩子，也就是afterEach,不需要主动调用next()函数.
补充二：上面我们使用的导航守卫,被称之为全局守卫.

  • 路由独享的守卫.
  • 组件内的守卫.

更多内容,可以查看官网进行学习:
https://router.vuejs.org/zh/guide/advanced/navigation-
guards.htmI#%E8%B7%AF%E7%94%B1%
E7%9A%84%E5%AE%88%E5%8D
%AB
https://router.vuejs.org/guide/advanced/navigation-guards.html#navigation-guards

keep-alive 遇见vue-rooter

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

它们有两个非常重要的属性:

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

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

<keep-alive>
	<router-view>
	<!--所有路径匹配到的视图组件都会被缓存!-->
	</router-view>
</keep-alive>

通过create声明周期函数来验证

案例：TabBar实现

1.1 实现思路

在这里插入图片描述
在这里插入图片描述

6.Vuex详情

6.1 Vuex的作用

官方解释: Vuex是一个专为Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的 time-travel调试、状态快照导入导出等高级调试
功能。
状态管理：
状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。
那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢?

版权声明：本文为qq_33390700原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。