Vue-Router基础知识点总结【vue系列】

Vue-Router

• 认识路由

  • 1.什么是路由

  • 2.后端路由阶段

  • 3.前端路由阶段

• 前端路由的规则

  • 1.URL的hash

  • 2.HTML5的history模式

• Vue-Router基础

  • 1.认识vue-router

  • 2.安装与使用vue-router

  • 3.路由组件详解

• 路由配置其他补充

  • 1.路由的默认路径

  • 2.路径的History模式

  • 3.router-link和配置路由的属性补充

  • 4.编程式导航

  • 5.动态路由匹配

• 路由懒加载

  • 1.认识路由懒加载

  • 2.使用路由懒加载

• 路由嵌套

  • 1.认识嵌套路由

  • 2.嵌套路由实现

  • 3.嵌套路由的默认路径

• query获取参数

  • 1.query获取

  • 2.传递参数的方式

  • 3. router 和 route的区别

• 导航守卫⚔

  • 1.认识导航守卫

  • 2.导航守卫使用

  • 3.全局后置钩子

  • 4.路由独享钩子函数

  • 5.组件内钩子函数

• keep-alive组件

  • 1.页面缓存

  • 2.keep-alive组件

一. 认识路由

1.什么是路由(理解)

• 路由解释
  • 路由表本质上就是一个映射表, 决定了数据包的指向
  • 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动
  • 路由中有一个非常重要的概念叫路由表
• 路由器
  • 路由是决定数据包从来源到目的地的路径
  • 转送将输入端的数据转移到合适的输出端
  • 路由器提供了两种机制: 路由和转送.

路由是根据不同的ur地址展示不同的内容或页面;

路由是一个比较广义和抽象的概念, 路由的本质就是对应关系

2.后端路由阶段

• 在早期的网站开发整个HTML页面是由服务器来渲染的
  • 服务器直接将渲染好对应的HTML页面, 响应给客户端展示
• 后端路由
  • 浏览器在地址栏中切换不同的url时, 每次都向后台服务器发出请求, 服务器响应请求
  • 在后台拼接html文件传给前端显示, 返回不同的页面
  • 意味着浏览器会刷新页面，网速慢的话说不定屏幕全白再有新内容。后端路由的另外一个极大的问题就是 前后端不分离

• 后端路由的缺点
  • 整个页面的模块由后端人员来编写和维护的, 不易维护
  • 通常情况下HTML代码和以及对应的后端逻辑代码会混在一起, 编写和维护都是非常糟糕的事情

3.前端路由阶段

• 前后端分离阶段:
  • 随着 Ajax 出现, 有了前后端分离的开发模式
  • 后端只提供 API 来返回数据, 前端通过 Ajax 获取数据, 通过 JS 将数据渲染到页面中
  • 这样做最大优点就是前后端责任清晰, 后端专注于数据上, 前端专注于交互和可视化上
  • 并且移动端 (ISO/Android) 出现后, 后端不需要进行任何处理, 依然使用之前一套 API 即可
• 什么是SPA
  • SPA是 single page web application 的简称, 译为单页Web应用
  • 简单说 SPA 就是一个 web 项目只有一个 html 页面, 一旦页面加载完成, SPA 不会因为用户的操作进行页面的重新加载或跳转
  • 取而代之的是利用 JS 动态的变换 html 的内容, 从而模拟多个视图间跳转
• 单页面富应用 (SPA)
  • 其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由
  • 也就是前端来维护一套路由规则
• 前端路由的核心是什么呢?
  • 改变URL, 但是页面不进行整体的刷新

二. 前端路由的规则

1.URL的hash

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

2.HTML5的history模式

• history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面
• history.pushState()
  • 类似: 进栈出栈, 先进后出

• history.replaceState()
  • 替换URL, 没有回退

• history.back()
  • 回退到上一次的URL
• history.forward()
  • 前进上一次的URL
• history.go(Number)
  • Number: 前进或回退到指定的URL

三. Vue-Router基础

1.认识vue-router

• vue-router是Vue.js官方的路由插件, 它和vue.js是深度继承的, 用于构建单页面应用 (官方文档)
• vue-router是基于路由和组件的
  • 路由用于设定访问路径, 将路径和组件映射起来
  • 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换

2.安装与使用vue-router

• 步骤一: npm安装

  • npm install vue-router --save

• 步骤二: 在模块工程中使用它(因为是一个插件, 所以通过Vue.use()来安装路由功能)

  • ① 导入路由对象, 并且调用Vue.use(VueRouter)安装路由功能

  • ② 创建路由实例, 并传入路由映射配置

  • ③ 在主入口文件: 引入创建的路由实例, Vue实例中挂载路由实例

  • 1.配置Vue-Router (图示)

• 步骤三: 使用vue-router

  • 创建路由组件

  • 配置路由映射(组件和路径映射的关系)

  • 使用路由 和 

  • 2.使用Vue-Router (图示)

3.路由组件详解

• : 该标签是已经内置全局的组件, 它会被渲染成一个标签

  • path: 在路由中配置的 path 路径
  • to="path": 该属性会被渲染为href属性
  • to="path": 属性的值会渲染为 # 开头的 hash 地址

• : 该标签会根据当前的路径, 动态渲染出相对应的组件

• 在路由切换时, 切换的是挂载的组件, 其他内容不会发生改变

四. 路由配置其他补充

1.路由的默认路径

场景: 进入网站首页, 希望渲染首页的内容

• 在路由规则中添加默认路径的重定向

const routes = [
    {
      // 配置默认路径
      path: '/',
      // 重定向到/home路径
      redirect: '/home'
    }
]
复制代码

2.路径的History模式

场景: 页面显示的URL, 不希望是哈希值带 #/home, 希望显示正常的URL: /home

• 在VueRouter实例option中设置mode为history模式即可

// 创建VueRouter对象
const router = new VueRouter({
  routes,// 路由规则
  mode: 'history'// URL显示的模式
})
复制代码

3.router-link和配置路由的属性补充

• 其他的属性
  • tag="": tab可以指定组件渲染成什么元素
  • replace: 没有回退history记录, 前进没有效果
  • active-: 当对应的路径匹配成功时, 会自动给当前元素添加一个router-link-active的class, 设置active-class可以更改默认的名称

<router-link to="/home" tag="button" replace active-class="active">首页router-link>
<router-link to="/about" tag="button" replace active-class="active">关于页面router-link>
复制代码

• 配置路由的属性: linkActiveClass
  • 作用: 当对应的路径匹配成功时, 设置默认添加的类名

const router = new VueRouter({
  routes,// 路由的映射规则
  mode: 'history',// 模式
  linkActiveClass: 'active'// 设置默认匹配添加地类
})
复制代码

4.编程式导航

• 场景: 没有使用全局组件, 来跳转URL
  • this.$router.push('path'): 来实现跳转URL, 有回退history记录
  • this.$router.replace('path'): 来实现跳转URL, 没有回退history记录

  methods: {
    home() {
      // 没有使用全局组件,来跳转URL,如何实现
      // this.$router.push('/home') // 有回退记录
      this.$router.replace('/home') // 没有回退记录
    },
    about() {
      // this.$router.push('/about')
      this.$router.replace('/about')
    }
  }
复制代码

5.动态路由匹配

• 某些情况, 我们需要动态的来设置path路径, 比如进入用户页面, 希望显示的是如下路径

  • /user/aaa 或 /user/bbb
  • 除了有前面的 /user 之外, 后面还跟上了用户的ID
  • 这种 path 和 Component 的匹配关系, 称之为动态路由(也是路由传递数据的一种方式)

• 动态路由匹配步骤

  • 1.配置动态路由参数

    const routes = [{
      path: '/user/:userId',
      component: User
    }]
    复制代码

  • 2.在APP.vue组件中传递参数

  • 3.路由组件中通过 $route.params 获取路由参数

• 图示

五. 路由懒加载

1.认识路由懒加载

• 官方解释
  • 当打包构建应用时, JavaScript包会变的非常大, 影响页面加载
  • 如果我们能把不同路由对应的组件分割成不同的代码块, 然后当路由被访问的时候才加载对应组件, 这样就更高效了
• 为什么使用路由懒加载?
  • 我们打包后的文件一般情况都是放在一个js文件当中, 必然这个文件会非常大
  • 如果我们一次性从网络请求下来这个文件, 可能花费很长时间, 甚至浏览器出现短暂白屏状况
  • 如何避免这种情况: 使用路由懒加载就可以了
• 路由懒加载做了什么?
  • 路由懒加载的主要作用就是: 将路由对应的组件打包成一个个的js代码块
  • 只有这个路由被访问到的时候, 才加载对应的组件

2.使用路由懒加载

• 方式一: 结合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')

• 打包后效果图

六. 路由嵌套

1.认识嵌套路由

• 在 home 页面中, 我们通过 /home/news 和 /home/message 访问一些内容
• 在一个路径映射另一个组件, 访问这两个路径也会分别渲染两个组件
• 路径和组件的关系如下:

2.嵌套路由实现

• 1.创建组件
• 2.在路由映射规则中, 配置嵌套路由: children: [{},{}]
• 3.在需要嵌套该组件的页面中, 使用 router-link 和 router-view

3.嵌套路由的默认路径

• 嵌套的路由也可以设置默认路径

  const routes = [
  {
    path: '/home',
    component: Home,
    // 配置嵌套路由  
    children: [
    {
      // 嵌套路由的默认路径
      path: '',
      redirect: 'news'
    },
    {
      path: 'news',
      component: News
    },
    {
      path: 'message',
      component: Message
    }]
  }]
复制代码

七. query获取参数

1.query获取

• 1.创建新的组件 Profile.vue
• 2.配置路由映射
• 3.在 APP.vue 添加跳转的

 
<router-link :to="{path: '/profile',query: {
  name: 'wuyifan',
  age: 18,
  height: 1.88
}}">档案router-link>


 <h3>{{$route.query}}h3>
复制代码

图示

2.传递参数的方式

• 传递参数主要有两种类型: params和query
• params
  • 配置路由path: /user/:userId
  • 传递的方式: 在path后面拼接上需要传递的值
  • 获取传递的参数: $route.params.userId
• query
  • 配置路由path: /profile (普通配置)
  • 传递的方式: {path: '/profile', query: {name: 'yifan'} }
  • 获取传递的参数: $route.query.name

• 当你不使用来实现跳转

this.$router.push({
        path: '/profile',
        query: {
          name: 'yifan',
          age: 18,
          height: 1.88
        }
      })
复制代码

3. router 和 route的区别

• $router和$route区别
  • $router是VueRouter实例, 对路径相关导航操作
  • route是当前path映射的组件对象(当前活跃的路由对象), 可以获取path, query参数等

八. 导航守卫⚔

1.认识导航守卫

官方解释: vue-router提供的导航守卫主要用来通过跳转或取消的方式导航守卫

• 导航守卫
  • 导航守卫就是路由跳转过程中的一些钩子函数, 路由跳转是一个大的过程, 这个大的过程前后中等等细小的过程, 在每个过程都有一个函数, 这个函数能够让你操作一些其他的事情, 这就是导航守卫
  • vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发

全局钩子函数

• 可以直接在路由配量文件router.js里编写代码逻辑, 可以做一些全局性的路由拦截

// 全局前置守卫
router.beforeEach((to, from, next) => {
   // to: Route:即将要进入的目标路由对象
 // from: Route:当前导航正要离开的路由  
    // 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed (确认的)
 next();
});
// 全局后置守卫
router.afterEach((to, from) => {
    console.log(to.path);
});
复制代码

2.导航守卫使用

• 考虑一个需求: 在一个SPA应用中, 如何修改网页标题
  • 第一应该想到在每一个路由对应的组件.vue文件中, 通过mounted生命周期函数, 对标题修改
  • 但是当页面比较多是, 这种方式不易维护(因为需要在多个页面执行类似的代码)
  • 有没有更好的方法呢? 使用导航守卫即可
• 在路由配置文件中使用导航守卫, 修改网页标题

// 在钩子当中定义一些标题, 可以利用meta来定义
const routes = [
    {
        path: '/user/:userId',
        component: User,
        meta: {
            title: '用户'
        }
    },
    {
        path: '/profile',
        component: Profile,
        meta: {
            title: '档案'
        }
    }
]
// ------导航守卫(guard)-----------
router.beforeEach((to, from, next) => {
  // 从from跳转到to
  // from: 将要进行跳转的当前$route对象 (跳转前的一些操作)
  // to: 跳转后$route对象 (跳转后的一些操作)
  // next(): 调用该方法后, 才能进入下一个钩子
  document.title = to.matched[0].meta.title;
  next()
})
复制代码

3.全局后置钩子

• 你也可以注册全局后置钩子, 然而和守卫不同的是, 这些钩子不会接受next函数也不会改变导航本身

router.afterEach((to, from) => {
  // ...
})
复制代码

4.路由独享钩子函数

• 可以做一些单个路由的跳转拦截。在配量文件编写代码即可

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
复制代码

5.组件内钩子函数

• 更细粒度的路由拦截, 只针对一个进入某一个组件的拦截

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}
复制代码

钩子函数使用场景

其实路由钩子函数在项目开发中用的并不是非常多，一般用于登录状态的校验，没有登录跳转到登录页；权限的校验等等。当然随着项目的开发进展，也会有更多的功能可能用钩子函数实现会更好，我们知道有钩子函数这个好东西就行了，下次遇到问题脑海就能浮现，噢，这个功能用钩子实现会比较棒。我们的目的就达到了。

九. keep-alive组件

1.页面缓存

• 在Vue构建的单页面应用(SPA)中, 路由模块一般使用vue-router
• vue-router不保存组件被切换的状态, 它进行push或replcae时, 旧组件会被销毁, 新组建会被创建, 再走一遍完整的生命周期
• 但是有的时候, 我们有一些需求,: 比如返回到跳转前用户点击的列表页面, 但是当我们返回的时候没有之前的记录,对于这种页面缓存需求, 我们可以使用keep-alive组件来解决

2.keep-alive组件

• keep-alive 是 Vue 内置的一个组件, 可以使被包含的组件保留状态, 或避免重新渲染
  • 两个非常重要的属性:
  • inclue: 值是字符串或正则表达, 只有匹配的组件会被缓存
  • exclue: 值是字符串或正则表达, 任何匹配的组件都不会被缓存
  • 千万注意: 字符串匹配的是Vue组件中name属性, 如果没有配置name属性 keep-alive 将不会生效
• 使用keep-alive: 在keep-alive包裹中的视图组件都会被缓存

<keep-alive exclude="Profile,User">
  <router-view>router-view>
keep-alive>
复制代码

• 另外：activated,deactivated这两个生命周期函数一定是要在使用了keep-alive组件后才会有的，否则则不存在