一、前景知识

(一)、基本知识

路由、转送、路由表

路由:我们仨都算是负责运输行业的,但是我只是负责运输线路的确定
路由表:为了避免“转送”送错货物到码头,我就负责指定运输的码头
转送: 我负责具体的货物运输,将货物运输到指定的码头。要是没有“路由表”大哥的帮忙,我肯定一天要在十多个码头来来回回的瞎折腾呢。

① 路由:决定数据包从来源到目的地的路径
② 路由表:本质是映射表,决定了数据包的指向
③ 转送:将输入端的数据包传送到合适的输出端

(二)、前后端未分离阶段

1.后端渲染

  后端渲染:我是高级绘画师,常常做着默默无闻的工作。平常只要是 “服务器”大哥给我的 “URL”设计方案,我都能用我精湛的jsp技术将它们绘画出来。

后端渲染涉及到三个东西:浏览器 + 服务器 + jsp
① 浏览器:当客户端点击某个页面时,浏览器就会将该页面的URL传递给服务器
**② 服务器:**服务在接受到了浏览器传送过来的URL后,对URL进行解析,通过jsp技术渲染相应的内容
③ jsp:全称 Java Server Page,是将服务器解析后传送过来的URL进行渲染,比如添加HTML、CSS、Java等,最后将渲染好的页面再传回给浏览器。

后端渲染,用一句话来说就是:网页已经在jsp渲染好了再传送给浏览器。

2.后端路由

后端路由主要负责URL和jsp页面的映射关系,但是使用后端路由会有以下的缺点:
① 整个页面的模块都是由后端人员编写和维护的;
② 如果前端人员想要开发页面,就要会PHP和Java语言;
③ 将HTML代码和逻辑数据代码整合在了一起,不易于后期维护。

(三)、前后端分离阶段

1.基本原理

在这个阶段,涉及到三个重要的人物:浏览器、静态资源服务器、API接口服务器

  *浏览器:接到用户给我的URL订单,首先得向“静态资源服务器”请求该订单所需要的材料,然后有些材料要经过特殊处理的,我又得交给“API接口服务器”帮我加好工后再给回我,最后才能完成客户的订单。

① 浏览器:在接受到某个页面的URL时,首先会向静态资源服务器发送请求,静态服务器就会返回该页面相关的html+css+js;然后当浏览器解析js代码时,就通过Ajax向API服务器请求相应的数据;最后通过js 渲染到浏览器中
**② 静态资源服务器:**当浏览器传送URL时,返回该页面相关的html+css+js。并且在静态资源服务器中,存放多套的html+css+js,每一个URL都有对应的一套html+css+js。
③ API服务器:向浏览器发送解析所需要的数据

而在这个阶段,涉及到一个概念:前端渲染
  前端渲染指的是浏览器显示的网页中的大部分内容,都是由前端写的js代码在浏览器中执行,最后显然出来的网页。
总结起来就是:网页的渲染是在浏览器中渲染的

2.特点

① 后端提供数据,前端通过Ajax获取数据,并且通过JavaScript将数据渲染到页面中;
② 前后端责任清晰,后端专注于数据上,前端专注于交互和可视化上

(四)、SPA:单页面富应用阶段

1.基本原理

  SPA,全称:Simple Page Application,译为单页面富应用。使用该模式开发出来的项目,最终只有一个index.html页面,如果涉及到多个页面时,需要前端路由的处理,下面讲解它们之间的原理:
  浏览器:我现在可轻松啦,当用户向我提交URL订单的时候,我只需要向“静态资源服务器”请求原材料,而且是一下子就把所有的材料都搬运回来。
静态资源服务器:为了提高效率,我也不像以前那么傻,为每一个URL订单开一个工厂来专门生产材料,而是直接用一个工厂生产所有的材料。

① 静态资源服务器:保存html+css+js,并且html仅有一个index.html
**② 浏览器:当接收某个页面的URL时,向静态资源服务器其请求一整套的html+css+js。下载一整套的资源最初仅仅渲染index.html,**而其余的页面在和用户有交互时才渲染。比如用户点击“我的”,就从一整套的html+css+js中抽取和“我的”页面相关的内容交给浏览器渲染出来。

而这个阶段的核心是:前端路由
  前端路由是指当url发生改变时,就从一整套的html+css+js抽取出和当前url先关的内容,从而实现每个子url和子页面的一一对应关系。
总结起来就是:你要什么就给什么,不给多余的。

2.特点

在前后端分离的基础上增加了前端路由

要明白以下几点:
1.什么是前后端分离:前端负责美丽,后端负责干活
2.后端渲染:在jsp中已经渲染好了整夜页面
3.后端路由:将ur和jsp页面对应
4.前端渲染:在浏览器中渲染
5.前端路由:要什么给什么,而且绝不多给

二、路由安装和配置

(一)、如何实现修改URL而不刷新页面?

1.前因后果

  当页面的URL发生改变时,就会向服务器发送请求,请求该页面相应的内容,然后页面就会刷新。但是现在要做的就是当URL发生改变的时候,页面并不会进行刷新,可以通过下面三种方法:

2.方法

① 修改URL的hash
在控制台中输入命令: location.hash="xxx"
  如果页面的URL发生改变,就会向服务器发送请求,请求的资源我们可以在Network查看。所以演示的步骤如下:在控制台输入 location.hash="aaa" -->观察浏览器的地址栏是否改变 --> 查看Network 是否有新资源。

地址栏由原来的 http://localhost:8080/ --> 变成 http://localhost/#/aaa 说明页面的URL已经发生了改变。

发现该页面并没有向服务器发送新的请求。说明这个方法是可行的O(∩_∩)O

② html5 的pushState

这是第二种修改URL而不刷新页面的方法,用法如下: history.pushState(,'xxx','URL') 。第一个参数是对象,第二个参数是title,第三个参数是URL

history.pushState指令的原理和栈结构相似。先进后出,当在控制台输入多个history.pushState指令时,URL只会显示最后一条指令的URL。

③ html5 的replaceState
同样的,和pushState工作的基本原理相似,但是也有不同:
  pushState是一个类似栈的结构,会保存历史记录,所以可以返回上一次访问过的页面;
  而replaceState 是直接用当前的URL替代了上一个URL,所以不能够返回上一次访问过的页面。。

(二)、路由安装和配置

  路由的基本知识小编已经在上一篇提及过了,这里呢主要为大家分享如何安装和配置路由

1.安装路由

  有两种方式,一是通过命令 npm install vue-router --save安装,二是在创建项目的时候就选择安装路由

当安装完成后,会在src文件夹下默认创建 router 文件夹,router文件夹下又会自动创建 index.js文件。

2.使用路由的步骤

  这里主要分成四步:① 导入路由插件 ② 使用路由插件 ③创建路由对象 ④使用路由对象
① 导入路由插件
  在通过npm安装好路由之后,如果想真正的使用,首先肯定是导入路由啦。在router文件夹下的index.js文件写入下面的代码:

import VueRouter from 'vue-router'

② 使用路由插件
  导入好的路由并不能直接使用,必须通过**Vue.use()**才可以使用。

Vue.use(VueRouter)

③ 创建路由对象
  和创建Vue实例一样的创建方法,值得注意的是这里的routes属性负责了每一个URL和页面的映射关系o

const router = new VueRouter({
    // 负责URL和页面的映射关系
    routes:[
        
        
    ]
})

④ 使用路由对象
  如果在别的页面使用路由,肯定得先把路由导出,别人才能调用。

//首先得在index.js文件导出路由
export  default router
//然后在main.js文件使用路由
import router from './router'
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

关于这里有必要解释一下,为什么导入路由的路径是 ./router 而不是 ./router/index.js 。因为在执行的时候,会默认先执行index的文件,所以写不写index的效果是一样的。

三、路由映射配置

(一)、编写路由映射关系

1.创建路由组件

因为映射关系是映射页面和URL的关系,所以我们得先准备好页面。
创建 home.vue 和 about.vue文件,然后在该文件中书写相关的内容

//about.vue文件内容
<template>
    <div>
        <h1>关于</h1>
        <span>在这里你可以问到任何你想问的问题</span>
    </div>
</template>

<script>
</script>

<style>
    h1{
        color: aquamarine;
    }
</style>


//home.vue文件内容
<template>
    <div>
        <h1>首页</h1>
        <span>我是首页</span>
    </div>
</template>

<script>
</script>

<style>
    h1{
        color: red;
    }
</style>
2.配置路由映射关系

  routes主要放两个东西:路径 path + 组件 component。每一个映射关系就是一个对象,所以我们可以这样写:

//1.导入
import VueRouter from 'vue-router'
import Home from '../components/home.vue'
import About from '../components/about.vue'
Vue.use(VueRouter)

//2.创建路由对象
const router = new VueRouter({
    // 负责URL和页面的映射关系
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component:About
        }
        
    ]
})

//3.导出路由
export  default router

当页面的地址中有 “/home ”就显示home相关的页面;当页面的地址中有 “/about ”就显示about相关的页面.

3.使用路由

​ 页面和URL的映射关系已经建立好了,但是得要有东西来触发它们真正起作用,所以就涉及到另外两个重要的标签: router-link 和router-view
**① router-link:**是vue-router 中已经注册过多的组件,其功能类似于a标签,点击到文字就跳转到相应的页面
② router-view:它的作用就是决定页面的显示
比如:

<template>
    <div>
        <router-link to="/home">首页</router-link>
        <router-link to="/about">关于</router-link>
        <router-view></router-view>
    </div>  
</template>

在App.vue文件中写入上面的代码,结果如下图所示:

四、路由跳转

(一)、路由的默认路径

1.产生原因

  当我们进入一个网页的时候,首先引入眼帘的肯定是首页对不对。所以我们要将首页作为我们的默认路径

2.用法

其实很简单,在routes的映射关系里使用redirect。
  redirect又叫重定向,意思是当path为空的时候,就跳转到redirect指定的路径。
比如:

const router = new VueRouter({
    // 负责URL和页面的映射关系
    routes:[
    //路由的默认路径
        {
            path:"",
            redirect:'/home'
        },
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component:About
        }
        
    ]
})

当路径为空的时候,我们就跳转到‘/home’路径下,然后根据映射关系,跳转到/home路径下就显示首页的内容。

3.改进

  但是大家有没有发现,我们的URL地址多了个 “#”【因为是通过hash值修改的URL】,然而我们并不希望有这个多余的“#”,怎么办呢?
很简单,在创建router对象的时候添加多一个属性: mode:history

const router = new VueRouter({
    // 负责URL和页面的映射关系
    routes:[
        {
            path:"",
            redirect:'/home'
        },
        {
            path:'/home',
            component:Home
        },
        {
            path:'/about',
            component:About
        }
        
    ],
    mode:'history'
})

五、路由跳转的方式

一、router-link补充

四个关键字:tag、to、replace、activeClass。
① tag:指定 router-link 被渲染成什么组件。
  router-link 默认被渲染成 a标签,如果你想要渲染成别的标签,添加 tag 属性即可,具体用法如下:

<router-link to="/home" tag="button">首页</router-link>
<router-link to="/about" tag="button">关于</router-link>

 可以看到,通过 tag="button" 的设置,就将router-link 以按钮的形式显示出来了。
**② to :指定跳转的路径。**用法如下:

<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>

当用户点击 “首页” 就会跳转到 “/home” 路径下的文件,以此类推。

③ replace:不会留下历史记录,即点击后退键不会返回到上一个页面中。
  router-link 默认是采用 pushState 的方式保留历史记录,如果在某些特殊的情况下不允许用户点来点去就乐意添加该属性。用法如下:

<router-link to="/home" replace>首页</router-link>
<router-link to="/about" replace>关于</router-link>

当用户子在“首页” 和 “关于” 两个页面来回切换时,就不可以返回上一个访问过的页面。)╮
④ activeClass:激活状态。
  意思是当 router-link 对应的路由匹配成功时,会自动给当前元素设置一个叫router-link-actice的class,设置active-class 可以修改默认的名称。用法如下:
4.1 单一书写
这种写法是直接嵌套在标签内部,比如:

<router-link to="/home" tag="button" replace active-class="warp">首页</router-link>
<router-link to="/about" tag="button" replace active-class="warp">关于</router-link>

这种写法并非长久之计,因为一旦页面数量很多的时候,就招架不住了,所以强烈推荐下面写法。
4.2 批量书写
通过在router 对象添加属性 linkActiveClass 。比如:

const router = new VueRouter({
// 负责URL和页面的映射关系
    routes:[
    linkActiveClass:"warp"
})

二、代码跳转路由

  在上面呢,我们是通过 router-link 标签来实现路由跳转的,那如果我不想通过这种方式来跳转路由,是否还有其他的方式呢?答案是:有的。下面就为大家分享路由跳转的进阶版本--代码跳转

1.基本思路

  代码跳转的思路很简单,通过添加事件,然后在对事件处理的methods方法中添加属性:this.$router 即可,具体见下面代码:

2.使用流程

① 绑定事件
  绑定事件的对象是需要路由跳转的地方,比如点击 “首页” 就跳转到 “/home”页面

<button @click="homeClick">首页</button>
<button @click="aboutClick">关于</button>

② 添加 this.$router属性
在导出路由对象的地方添加属性如下:

<script>
export default {
  name: 'App',
  methods:{
      homeClick(){
          this.$router.push('./home');
      },
      aboutClick(){
          this.$router.push('./about');
      }
  }
}
</script>

$router是vue-router本身自带的属性。代码跳转的方式和使用 router-link 跳转的方式其实差不多,都可以一一对应起来。