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

基础理论知识

什么是路由？

路由就是通过互联的网络把信息从源地址传输到目的地址的活动---维基百科
路由器提供了两种机制：
   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说明可以使用。

具体的使用配置步骤：项目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中进行挂载：

使用vue-router的步骤

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

1：创建路由组件一：About

2：创建路由组件2 ：Home

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

4：使用路由

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

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组件

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

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

注意：改变router-view的位置会产生如下的影响

<template>
  <div id="app">
    <router-view></router-view>
    <h3>我是网站的标题</h3>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <!-- 相当于是占位的标签，如果放到上面，则会在上面渲染    -->
	<!--<router-view></router-view>-->
  </div>
</template>

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

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

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

})

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