vue-router路由

三、Vue-Router

                                         ps:仅供本人记忆

3.1 认识路由

3.1.1 什么是路由？

• URL的概述
  • URL是统一资源定位符，是互联网上标准资源的地址
  • 通过URL，我们可以访问其他计算机上的资源
• URL的组成
  • 传输协议://服务器IP或域名:端口/路由(路径)?地址栏参数(查询字符串)
  • https://www.baidu.com/index?name=张三&age=18
• 路由可以理解为用来跟后端服务器进行交互的一种方式，通过url中不同的路由部分，来请求不同的页面
  •  
  • 不同的url路径 对应着不同的页面，这种对应方式，我们也可以理解为路由

3.1.2 后端路由

• 早期的网站开发整个HTML页面是由服务器来渲染的。其交互过程是这样的
  1. 浏览器发出网络请求
  2. 服务器监听到80端口（或443）有请求过来，并解析url路径
  3. 拦截url的路由部分，给浏览器返回对应的数据（可以是 html 字串，也可以是 json 数据，图片等）
• 一个完整的HTML页面里包含了许多个小的页面，每个页面对应着不同的url地址，服务器会根据不同的url地址响应给浏览器不同的页面数据

 

• 后端路由的缺点:
  • 整个页面的模块由后端人员来编写和维护的

3.1.3 前后端分离阶段

• 随着Ajax的出现, 有了前后端分离的开发模式.
  • 后端只提供API来返回数据,，前端通过Ajax发送网络请求获取数据, 并且可以通过JS将数据渲染到页面中
  • 这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上.
  • 目前很多的网站依然采用这种模式开发.

 

• 在之前写的Ajax相关案例，都是采用前后端分离形式实现的。参考：Ajax -> Ajax案例

3.1.4 SPA阶段

• SPA阶段：单页面富应用阶段
  • SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
• 在单页应用中, URL的改变会引起组件的改变, 且不与服务器有任何交互

 

• 之后通过Vue.js + Vue-Router开发的项目，都属于SPA页面

3.1.5 前端路由的核心

• 前端路由的核心：
  • 由浏览器拦截URL中路径的的变化，且URL的改变不会向服务器发送请求
  • 浏览器解析URL的变化，并且为其渲染对应的组件
  • 此时：URL中的路径和组件就形成了映射关系。这种关系我们可以称为前端路由
• 总结：前端路由本质上就是检测 url 的变化，截获 url 地址阻止向服务器发生请求，然后解析来匹配路由规则。
  • 参考文档：https://www.zhihu.com/question/53064386

3.1.6 前端路由的实现

• 前端路由一共有两种实现模式:
  1. hash 模式
  2. history 模式
• 通过location.hash来改变url，但是页面不发生刷新
  1. 就是类似于：http://www.taobao.com#/foo
  2. 这种 #后面 hash 值的变化，并不会导致浏览器向服务器发出请求，每次 hash 值的变化，会触发 hashchange 事件，通过这个事件我们就可以知道 hash 值发生了哪些变化
  3.  

• history.pushState()也可以实现修改url 页面不刷新。（有历史回退）
  •  
• history.replaceState()
  •  

• 在vue-router源码中，会自动监听url中路由部分的改变。当他改变时，会读取vue-router的配置文件，根据其路由与组件的映射关系，决定给浏览器渲染哪个组件

3.2 vue-router 基础

3.2.1 认识vue-router

• vue-router是Vue.js官方的路由插件，适合用于构建单页面应用(SPA页面)。
  • 学习文档： https://router.vuejs.org/zh/
• vue-router是基于前端路由和组件的
  • 在vue-router的单页面应用中，页面中url的路由部分的改变就是组件的切换.

3.2.2 使用vue-router

• 之后的学习阶段中，我们都通过Vue脚手架生成项目，进行开发学习

1. 安装： npm i vue-router
2. 创建组件对象，为了与路由进行映射

 

1. 在src文件夹下新建一个router文件夹，在router文件夹下新建一个index.js文件。配置组件和路由的映射关系

 

1. 将导出的router实例，挂载到入口JS文件中的Vue实例选项中

 

1. 在App.vue中创建可以修改当前页面URL的标签，用于渲染和路由对应的组件
   • router-link标签用于指定要跳转到的路由，router-view标签用于展示和当前路由匹配的组件。二者缺一不可

 

1. 最终效果如下，实现了根据不同路由，渲染不同组件的效果

 

• 上图中可以看到router-link标签，实际上是修改了URL中hash的值，这样修改URL不会让页面向服务器发送请求。实现了前端路由

3.2.3 路由重定向和修改路径模式

• 可以为根路由重定向到/home路由下，这样页面就可以展示/home所对应的组件了
  •  

• 实现前端路由的方式有两种：①修改URL的hash值 ②通过HTML5的history模式
  • router-link标签默认使用的是修改hash值的方式修改URL
  • 如果希望使用history模式，则要写入如下配置

 

3.2.4 router-link属性

• router-link标签主要用于修改URL，且修改URL后不会向服务器发送请求，该标签有如下属性
  • to：指定要跳转的路由。 to='/home'
  • tag：可以指定router-link标签之后渲染成什么标签。tag='button'：最终渲染成button标签
  • replace：不会留下历史记录，指定replace的情况下，无法回退页面。replace
• 如果当前页面的路由与router-link标签中to的值一样，那么当前的router-link元素为活跃状态。活跃状态下会自动添加一个router-link-active类名

 

• • 该class具体的名称也可以通过router实例的属性进行修改

• • • const router = new VueRouter({
         routes,
         mode: 'history',
         linkActiveClass: 'active'
      })

3.2.5 JS代码实现路由跳转

• 之前我们是通过router-link标签形式跳转路由的。有时我们希望跳转路由是通过JS代码手动进行跳转的，那么如何实现？

• • this.$router.replace('要跳转的路由')
    this.$router.push('要跳转的路由')

• • replace无回退历史，push有回退历史
• 需要注意的是：如果通过JS代码跳转路由，那么不能重复跳转到同一个路由下，否则会报错
  •  

3.2.6 路由懒加载

• 每个路由对应着不同的组件，这些与路由对应的组件最终会被打包到一个js文件中
  • 如果多个组件放在一个js文件中， 必然会造成这个页面非常的大.
  • 当从服务器访问打包后的页面时，由于加载体积过大的JS文件。可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况.
• 路由懒加载做了什么？项目性能优化
  • 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js文件
  • 懒加载：用到时再加载。只有在这个路由被访问到的时候，才会加载对应的组件(JS文件)
  • 使用路由懒加载，实际上就是优化打包后的项目文件

 

• 在配置路由与组件的映射关系文件中，引入组件对象的方式统一采用路由懒加载形式。这样可以优化打包后的项目文件

3.2.7 路由嵌套

• 嵌套路由是一个很常见的功能
  • 比如在home组件中, 我们希望通过/home/news和/home/message访问一些内容。但是却又不想丢失home组件展示的页面，这就要涉及到子级路由
• 路由和组件的关系如下

 

• 实现嵌套路由有两个步骤:
  • 创建对应的组件，并且在路由映射中配置对应的子路由.
  • 在组件内部使用< router-view >标签.

1.  

 

                                                                                 

 

• 注：以 / 开头的嵌套路径会被当作根路径，因此在配置或使用子路由时，不能加/

3.3 前端路由传递参数

3.3.1 传递参数的概述

• 前端路由中传递参数的使用场景：
  • 当路由发生改变时会渲染对应的组件到页面中。我们希望路由发生改变时，会携带一些参数，而该路由所对应的组件可以获取到这些参数，来决定展示哪些数据。
  • 这种需求就需要用到前端路由传递参数技术
• 前端路由传递参数的形式有两种，分别是路由参数和查询字符串参数。
  •  

3.3.2 前端路由参数的传递和获取

传递路由参数

1. 配置路由和组件映射关系。路由格式如下：

• • {
     // 匹配带有路由参数的路由
     path: '/user/:userID',
     component: User
    },

1. 通过router-link标签跳转路由，并且携带路由参数。PS：不要忘了添加<router-view>标签展示组件噢

• • <!-- 跳转路由时，携带路由参数 写法1 -->
    <router-link to="/user/kobe" >用户</router-link>
    ​
    <!-- 写法2 等价于上面写法 -->
    <router-link :to="{path: '/user/kobe'}" >用户</router-link>

• • 生成的URL：http://localhost:8080/user/kobe

获取路由参数

1. 可以在组件中通过this.$route.params.xxx获取到传递过来的路由参数

• • <!-- User组件 -->
    <h2>尊贵的{{ $route.params.userID }}用户，你好</h2>

• • xxx是配置路由格式时，指定的路由参数变量名

3.3.3 地址栏参数的传递和获取

传递地址栏参数

1. 配置路由和组件映射关系。路由格式和普通配置一样

• • {
     // 接收传递的查询字符串参数
     path: '/user',
     component: User
    }

1. 通过router-link标签跳转路由，并且携带地址栏参数。PS：不要忘了添加<router-view>标签展示组件噢

• • <!-- 跳转路由时，传递查询字符串参数 写法1 -->
    <router-link to="/user?name=kobe&age=32" >用户</router-link>
    ​
    <!-- 写法2 等价于上面写法 -->
    <router-link :to="{path: '/user', query: {nakome: 'kobe', age: 32}}" >用户</router-link>

• • 生成的URL：http://localhost:8080/user?name=kobe&age=32

获取地址栏参数

1. 在组件中通过this.$route.query.xxx获取到传递过来的地址栏参数

• • <h2>尊贵的{{ $route.query.name }}用户，你好</h2>
    <h2>{{ $route.query.age }}</h2>

• • xxx是查询字符串参数中的属性名

3.3.4 通过JS传递参数

• 传递查询字符串参数

• • // 跳转到/user路由下 并携带查询字符串参数
    this.$router.push({
       path: '/user',  // 要跳转到的路由
       query: {name: 'sb', age: 33}  // 要携带的地址栏参数
    })
    ​
    // 生成的URL:http://localhost:8080/user?name=sb&age=33

• 传递路由参数

• • // 跳转到/user路由下 并携带路由参数
    this.$router.push({
       path: '/user/kobe',  // 要跳转到的路由以及携带的路由参数
    })
    ​
    // 生成的URL:http://localhost:8080/user/kobe

• 需要注意的是：如果通过JS代码跳转路由，不能重复跳转到同一个路由下，否则会报错

• • let path = window.location.pathname
    if(path === '/user') {  // 判断当前页面的路由与要跳转的路由是否一致
     // ....
    }

3.3.5 $router 与 $route

• $router
  • $router为VueRouter实例，想要导航到不同的URL，则使用$router.push方法
  • 每个组件都是继承于Vue实例的原型。组件中的this.$router实际上指向就是入口JS文件中导入的router实例。

 

• $route
  • 每一个路由与组件的映射关系，我们可以看做是一个路由对象
  • 在使用了vue-router的应用中，路由对象会被注入到每个组件中，赋值为this.$route ，并且当路由切换时，路由对象会被更新。
  • $route为当前活跃的路由对象。他可以获取当前URL中的路由参数、查询字符串参数等