认识Vue-router以及其安装使用配置详解

港控/mmm° 2022-10-27 05:17 12阅读 0赞

### 基础理论知识 ###

###### 什么是路由？ ######

路由就是通过互联的网络把信息从源地址传输到目的地址的活动---维基百科
    路由器提供了两种机制：
       1：路由：路由是数据从来源到目的地的路径
       2：转送：将输入端的数据转移到合适的输出端
       3：路由中有一个非常重要的概念：
            路由表：本质是一个映射表，决定了数据包的指向

###### 什么是前端渲染？什么是前端渲染？ ######

###### 阶段一：后端路由 ######

1:早期开发都是使用后端渲染：jsp(java server page)
       前端页面请求，利用jsp技术，服务器进行页面渲染，将渲染好的页面直接传给浏览器，返回客户端，也叫做服务器渲染
    2：后端路由：后端处理URL和页面之间的映射关系。
    3：后端路由的缺点：
     	 -整个页面的模块都是由后端人员来编写维护的
     	 -前端人员如果要开发页面，需要通过PHP和java等语言来编写页面
     	 -而且：HTML代码和数据以及对应的逻辑混合在一起，编写和维护都非常糟糕。

###### 阶段二：前后端分离（前端渲染） ######

1：后端只负责提供数据，不负责任何阶段的内容
    2：随着Ajax出现，后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过js将数据渲染到页面。
    3：优点：前后端责任清晰，后端专注数据，前端专注于交互和可视化。

**前端渲染**：浏览器中显示网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的页面。

###### 阶段三：单页面富应用阶段 ######

1：SPA：在前后端分离的基础上加了一层前端路由，也就是前端来维护一套路由规则
    2：整个网站只有一个html页面，前端路由去维护一套映射关系
    3：前端路由的核心：改变URL，但页面不进行整体的刷新

## 认识vue-router ##

- vue-router是Vue.js官方的路由插件，和vue.js是深度集成的，适合用于单页面应用
     - vue-router是基于路由和组件的，路由用于设定访问路径，将路径和组件结合起来
     - 在vue-router的单页面应用中，路由的路径改变就是组件的切换。

#### 安装和使用vue-router ####

1:npm install vue-router --save 
    2:在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）
    	--导入路由对象，并且调用Vue.use()
    	--创建路由实例，并且传入路由映射配置
    	--在Vue实例中挂载创建的路由实例

如下图:项目中出现router文件夹，同时packag.json依赖项出现vue-router说明可以使用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]

##### 具体的使用配置步骤：项目router文件夹下的index.js文件如下配置 #####

import Vue from 'vue'
    //配置路由相关的配置
    import VueRouter from 'vue-router'
    import Home from '../views/Home.vue'
    //1:通过Vue.use(插件)，安装插件
    Vue.use(VueRouter)
    //2:创建VueRouter路由对象
    const routes = [
      //在这里配置固定的映射关系,一个url对应一个组件
    
    ]
    const router = new VueRouter({ 
      //配置路由和组件之间的应用关系
      routes
    })
    //3:将router对象传入到Vue实例中，这里导出，main.js中才能挂载使用导入
    export default router

然后在main.js中进行挂载：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]

### 使用vue-router的步骤 ###

第一步：创建路由组件
    第二步：配置路由映射：组件和路径映射关系
    第三步：使用路由：通过<router-link>和<router-view>

###### 1：创建路由组件一：About ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]

###### 2：创建路由组件2 ：Home ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]

###### 3：配置组件和路径的映射关系 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 4]

###### 4：使用路由 ######

1：<router-link>：该标签是一个vue-router 中已经内置的组件，它会被渲染成一个<a>标签
    2：<router-view>:改标签会根据当前的路径，动态渲染出不同的组件，白话就是，他是一个占位的标签，会根据不同的路由组件来替换其中的内容
    3：router-view的位置决定了替换的组件的位置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 5]

##  ##

router-link属性补充：

//1：属性 to
    	<router-link to="/home">首页</router-link>   
    	//点击首页a标签，就会将网页改成to里面的路径值，然后vue就会根据这个路径去渲染出新的组件
    	//2：属性 tag
    	<router-link to="/home" tag="button">首页</router-link>  
    	//可以指定router-link之后渲染成什么组件，这里可以渲染成button按钮
    	//3:属性 replace
    	<router-link to="/home" tag="button" replace>首页</router-link>
    	//replacce不会留下history记录，所以指定replace的情况下，反退键不会返回上一个页面，就是相当于我们的无痕浏览
    	//4:属性 active-class 当router-link对应的路由匹配成功时，会自动给当前元素设置一个router-link-class的class，设置active-class可以修改默认的名称，直接给该class设置样式，可以达到相应的目的。

###### 最终效果如下： ######

1：点击首页----路径切换/home --router-view 渲染出home组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 6]

###  ###

2：点击关于，路径切换/about  -----router-view渲染about组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 7]

##  ##

3：当路径是根目录时：没有组件被渲染出来，显示如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 8]  
注意：改变router-view的位置会产生如下的影响

<template>
      <div id="app">
        <router-view></router-view>
        <h3>我是网站的标题</h3>
        <router-link to="/home">首页</router-link>
        <router-link to="/about">关于</router-link>
        
    	
      </div>
    </template>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 9]

### 细心的我发现为什么每次的路径表示方式和我们常见的不同： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 10]

##  ##

原因：改变路径的方式有两种：
    	1：URL的hash
    	2：HTML5的history
    	3：默认情况下，路径的改变使用的URL的hash
    如果希望使用HTML5的history模式，非常简单，在router中的index.js下添加如下配置即可

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

![在这里插入图片描述][202102032017545.png]

### 总结：路由发生变化，vue就会渲染路由对应的组件。 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70]: /images/20221024/19047401ebb54819a12a70437e1fc6bd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 1]: /images/20221024/a5f3ebc5e17e41be8b1c428a220aa3bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 2]: /images/20221024/ba13bae46477417691968bb475d1bfd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 3]: /images/20221024/cf12d14749ca410ea8e11914a9511814.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 4]: /images/20221024/12eb6fd660b74b529d7d29d517c4f4f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 5]: /images/20221024/91230a99b1a441cbbfac43d73e9bc036.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 6]: /images/20221024/373c3060d96d486ca75f93f71905885c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 7]: /images/20221024/592220b5df374824b5317244f66fc588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 8]: /images/20221024/8ab70d92e69e44e8a55a4cca04de3dfc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 9]: /images/20221024/ae50b8f66347468c8fba5d8ba662fc66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6ajEwNDk1NjE2MDE_size_16_color_FFFFFF_t_70 10]: /images/20221024/3b7bb0f2388944bb9fbda4b2f10912b9.png
[202102032017545.png]: /images/20221024/bd84f69527e34cc2a3836451a9dc17ec.png