Vuejs第五篇（vue-router路由和tabbar）

目录（点击下面知识点可跳转）

• 一、什么是路由和其中映射关系（理解）
• 二、前端渲染后端渲染和前端路由后端路由（理解）
• 三、url的hash和HTML5的history（掌握）
• 四、vue-router-安装和配置方式（掌握）
• 五、路由映射配置和呈现出来（掌握）
• 六、路由的默认值和修改为history模式（掌握）
• 七、router-link的其他属性补充（掌握）
• 八、通过代码跳转路由（掌握）
• 九、vue-router-动态路由的使用（掌握）
• 十、vue-router-打包文件的解析（掌握）
• 十一、vue-router-路由懒加载的使用（掌握）
• 十二、vue-router-路由的嵌套使用（掌握）
• 十三、vue-router-参数传递一（掌握）
• 十四、vue-router-参数传递二（掌握）
• 十五、vue-router-router和route的由来（理解）
• 十六、vue-router-全局导航守卫（掌握）
• 十七、vue-router-导航守卫的补充（掌握）
• 十八、vue-router-keep-alive及其他问题（掌握）
• 十九、vue-router-keep-alive属性介绍（掌握）
• 二十、tabbar-基本结构的搭建（掌握）
• 二十一、tabbar-TabBar和TabBarltem组件封装（掌握）
• 二十二、tabbar-给TabBarltem的颜色动态控制（掌握）
• 二十三、知识回顾（了解）
• 二十四、tabbar-文件路径的引用问题（掌握）
• 二十五、Promise-Promise的介绍和基本使用（掌握）
• 二十六、Promise-Promise的三种状态和另外处理方式（掌握）
• 二十七、Promise-Promise的链式调用（掌握）
• 二十八、Promise-Promise的all方法使用（掌握）

一、什么是路由和其中映射关系（理解）

返回目录

说起路由你想起了什么？

• 路由是一个网络工程里面的术语
• 路由(routing) 就是通过互联网的网络把信息从源地址传输到目的地址的活动 -----维基百科

额,啥玩意儿？没听懂

• 在生活中,我们没有听说过路由的概念呢？当然了，路由器嘛

• 路由器是做什么的？你有想过吗？

• 路由器提供了两种机制：路由和转送

  • 路由是决定数据包从来源到目的地的路径
  • 转送将输入端的数据转移到合适的输出端

• 路由中有一个非常重要的概念叫路由表

  • 路由表本质上就是一个映射表，决定了数据包的指向

学习内容概括：

• 认识路由
• vue-router基本使用
• vue-router嵌套路由
• vue-router参数传递
• vue-router导航守卫
• keep-alive

脚手架2演练

记得选择下载路由哦

路由的更多理解大家可以查查资料，这里只是讲解怎么用

二、前端渲染后端渲染和前端路由后端路由（理解）

返回目录

路由发展阶段

后端路由阶段：
早期的网站开发整个HTML页面是由服务器来渲染的，服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.但是, 一个网站, 这么多页面服务器如何处理呢?

• 一个页面有自己对应的网址, 也就是URL.
• URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理.
• Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.
• 这就完成了一个IO操作.

上面的这种操作, 就是后端路由

• 当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户端
• 这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.

后端路由的缺点:

• 一种情况是整个页面的模块由后端人员来编写和维护的.
• 另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码
• 而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情.

前端路由阶段

前后端分离阶段：

• 随着Ajax的出现, 有了前后端分离的开发模式.
• 后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中.
• 这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上.
• 并且当移动端(IOS/Android)出现后，后端不需要进行任何处理，依然使用之前的一套API即可
• 目前很多网站依然采用这种模式开发

互联网发展第三阶段：单页面富应用阶段

• 其实SPA最主要的特点就是在前后端分离得到基础上加了一层前端路由
• 也就是前端来维护一套路由规则

前端路由的核心是什么呢？

• 改变URL，但是页面不进行整体的刷新。

三、url的hash和HTML5的history（掌握）

返回目录

URL的hash

• url的hash也就是锚点(#)，本质上是改变window.location的href属性
• 我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新

演示：
先把我们之前创建的Vue项目跑起来：npm run dev


试试第一种页面不跳转加载指令:
location.hash=‘url’

页面没进行跳转

再试试第二种
history.pushState({},’’,‘url’)

可以调用返回函数：（点击左箭头按钮也可以返回）
history.pushState({},’’,‘url’)
history.back()

最后试试第三种：history.replaceState({},’’,‘url’)

这种方法生成的url不能返回！！！

返回方法也有另一种:history.go()
补充说明:

上面只演示了三个方法
因为history.back()等价于history.go(-1)
history.forward()则等价于history.go(1)
所以这三个接口等同于浏览器界面的前进后退

四、vue-router-安装和配置方式（掌握）

返回目录

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

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

当然，我们的重点是vue-router

• vue-router是Vue.js官方的路由插件，它是vue.js是深度集成的，适用于构建单页面应用
• 我们可以访问其官方网站对其进行深度学习:https://router.vuejs.org/zh/

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

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

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

• 所以在后续，我们直接使用npm来安装路由即可

如果安装脚手架时选择了安装路由，就不用下面安装指令了

• 步骤一：安装vue-router

npm install vue-router --save

• 步骤二：在模块化工程中使用它(因为是一个插件，所以可以通过vue.use()来安装路由功能）
  • 第一步：导入路由对象，并且调用Vue.use(VueRouter)
  • 第二步：创建路由实例，并且传入路由映射配置
  • 第三步：在Vue实例中挂载创建的路由实例

删除index.js文件夹我们自己配
删除main.js中的导入

开始我们的配置，创建index.js

导入配置路由的相关信息：

// 配置路由的相关信息
import VueRouter from "vue-router";
//导入Vue
import Vue from "vue";

// 1.通过Vue.use(插件)，安装插件【因为VueRouter本质就是一个插件】
Vue.use(VueRouter)

// 2.创建VueRouter对象
const routes=[

]

const router = new VueRouter({
  //配置路由和组件之间的映射关系
  /*routes:routes*/
  routes

})
// 3.将router对象传入到Vue实例中
export default router

import Vue from 'vue'
import App from './App'
//导入路由对象
import router from "./router/index";

Vue.config.productionTip = false

new Vue({
  el: '#app',
  //挂载路由
  router,
  render: h => h(App)
})

完成配置

五、路由映射配置和呈现出来（掌握）

返回目录

第一步：创建路由组件
删除components包下的默认Vue文件
创建组件：

写上内容：

第二步：配置路由映射：组件和路径映射关系

第三步：使用路由：通过和

测试使用：

点击首页

点击关于

六、路由的默认值和修改为history模式（掌握）

返回目录

我们这里还有一个不太好的实现

• 默认情况下，进入网站的首页，我们希望渲染首页的内容
• 但是我们的实现中，默认没有显示首页组件，必须让用户点击才可以

如何可以让路径默认跳到首页，并且渲染首页组件呢？

• 非常简单，我们只需要多配置一个映射就可以了
  

配置解析

• 我们在routes中又配置了一个映射
• path配置的是根路径:/
• redirect是重定向，也就是我们将根路径重定向到/home的路径下，这样就可以得到我们想要的结果了
  
  下面这种不规范的路径我们怎么修改呢？
  
  配置history模式：
  
  再次打开浏览器：
  

七、router-link的其他属性补充（掌握）

返回目录

• 在前面的 中,我们只是使用了一个属性：to ，用于指定跳转的路径
• 还有一些其他属性
  • tag : tag可以指定 之后渲染成什么组件，比如下面的代码会被渲染成一个
  • 元素,而不是

<router-link to='/home'  tag='li'>

• replace ： replace 不会留下 history 记录，所以指定 replace 的情况下，后退键返回不能返回到上一个页面中
  

• active-class ：当 对应的路由匹配成功时,会自动给当前元素设置一个 router-link-active 的 class，设置 active-class 可以修改默认的名称(一般不需要改)
  
  我们可以利用这个动态生成的class改变一些动态样式：
  
  测试：
  

  • 在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类
  • 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可

但是如果你想修改默认的这个名字：就要用到active-class

效果：

也可以在路由配置中统一修改：

八、通过代码跳转路由（掌握）

返回目录

<template>
  <div id="app">
    <!--<router-link tag="button" to="/home" replace active-class="aaa">首页</router-link>--><!--使用路由展示组件的固定写法-->
    <!--<router-link tag="button" to="/About" replace active-class="aaa">关于</router-link>-->
    <!--<router-view></router-view>--><!--决定渲染出来的组件放在什么位置，占位的东西-->

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

<script>
export default {
  name: 'App',
  methods:{
    homeClick(){
      // 通过代码的方式修改路由 vue-router
      // this.$router.push('/home')//这个this.$router对象是已经生成的，不需要我们引入
      this.$router.replace('/home')//清除历史
    },
    aboutClick(){
      // this.$router.push('/About')
      this.$router.replace('/About')//清除历史
    }
  }
}
</script>

<style>
  .aaa{
    background-color: red;
  }
</style>

九、vue-router-动态路由的使用（掌握）

返回目录

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：

• /user/aaaa或/user/bbbb
• 除了有前面的/user之外，后面还跟上了用户的ID
• 这种path和Component的匹配关系，我们称之为路由（也是路由传递数据的一种方式）

创建User组件：



运行测试：

现在开始我们的动态配置：

运行获取：

子组件动态获取：


子组件动态获取：

改变值：

运行：

补充：

十、vue-router-打包文件的解析（掌握）

返回目录

对我们的项目进行打包：分析打包文件

十一、vue-router-路由懒加载的使用（掌握）

返回目录

懒加载：用到时再加载

认识路由的懒加载

官方给出的解释：

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

官方在说什么呢？

• 首先，我们知道路由中通常会定义很多不同的页面
• 这个页面最后被打包在哪里呢？一般情况下，是放在一个js文件中
• 但是，页面这么多放在一个js文件中，必然会造成这个页面非常大
• 如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上还出现了短暂空白的情况。
• 如何避免这种情况呢？使用路由懒加载就可以了

开始：
懒加载的方式一: 结合Vue的异步组件和Webpack的代码分析（强烈不推荐）

懒加载的方式二: AMD写法
const About = resolve => require([’…/components/About.vue’],resolve)
懒加载的方式三: 在ES6中，我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割（强烈推荐）

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

重构我们的代码：

重新打包看看：把app中的js代码分离了部分出去，减轻了加载压力

建议以后开发都使用懒加载

十二、vue-router-路由的嵌套使用（掌握）

返回目录

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

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

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

• 路由和组件的映射关系
  
  实现嵌套路由有两个步骤：

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

• 在组件内部使用标签

创建两个组件：

写上内容：


配置子路由：

因为这两个子组件是在home页面显示的，所以在Home.vue中使用

运行测试：


刚刚进去的时候是没有显示新闻或者消息的，此时我们可以配个默认路径

测试：

十三、vue-router-参数传递一（掌握）

返回目录

为了演示传递参数，我们这里再创建一个组件，并且将其配置好

• 第一步：创建新的组件Profile.vue
• 第二步：配置路由映射
• 第三步：添加跳转的

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

• params的类型：
  • 配置路由格式: /router/:id
  • 传递的方式: 在path后面跟上对应的值
  • 传递后形成的路径: ==/router/123,/router/abc
• query的类型
  • 配置路由格式：/router，也就是普通配置
  • 传递的方式：对象中使用query的key作为传递方式
  • 传递后形成的路径：/router?id=123,/router?id=abc

测试：

开始传递参数：

我们写成这种形式：

运行看看：

显示参数：

运行测试：

十四、vue-router-参数传递二（掌握）

返回目录

函数定义传递参数：

运行测试：

十五、vue-router-router和route的由来（理解）

返回目录

$route和 $ router是有区别的

• $ router 为VueRouter实例，想要导航到不同URL，则使用$ router.push方法
• $ route为当前 router 跳转对象里面可以获取name、path、query、params等

在User.vue设置点击打印router对象

在main.js中也打印我们导入的router对象:

结果：

不再详解，理解结论的两句话即可：

• $ router 为VueRouter实例，是整个父路由（不止一个父路由对象哦）
• $ route 为活跃时某个路由对象，哪个路由活跃就是哪个路由对象

十六、vue-router-全局导航守卫（掌握）

返回目录

导航守卫主要目的是监听路由跳转到哪里了

我们来考虑一个需求:在一个SPA应用中，如何改变网页的标题

• 网页标题是通过