路由 Vue-router的个人认识

路由 Vue-router的个人认识及其简单页面

什么是路由Vue-router？
通过互联网网络把信息从源地址传输到目的地址中。
路由本质：一个映射表，决定数据包指向
我们先从家庭路由器讲起：
网络有内网和公网IP 192.168.x.x为内网ip地址 202.111.x.x为外网ip地址。
外网ip永不重复，内网会重复。假如你的公司和家里都有相同的ip地址，路由器如何知道是发到你公司还是家里呢？路由会根据映射表（把内网ip和电脑MAC物理地址一一对应） 来进行数据传输。

什么是前端路由和后端路由与前端渲染和后端渲染？

下面通过时间线进行解释
早期：前后端的分离不明显，往往后端任务工程量大于前端，
因为早期网页开发是 html+css+java ，页面一般包含html+css+java 中。 java的作用是直接从数据库中读取数据，并且将它动态存放在页面中。这就是后端渲染： *在后端传递给前端时就已经完成了渲染。
后端渲染的页面越来越多，是通过后端路由进行管理。==什么是后端路由呢？后端路由：后端处理URL和页面之间的映射关系，最后交给一个Controller进行管理。

页面需要请求不同的路径内容时，服务器渲染好整个页面返回给客户端。
缺点：
1.整个页面会由后端人员编写和维护。
2.前端人员开发页面得通过PHP和Java编写代码。
3.HTML代码和逻辑混在一起，不易维护。

中期：前后端分离阶段

Ajax的出现有了前后端分离的开发模式，前端使用HTML+css+js开发模式，读取后端接口。
后端提供API返回数据。

后端专注数据，前端专注交互和可视化
即使移动端出现，后端依然可以使用同一套API即可。

后期：
出现了SPA页面，整个网页只有一个HTML页面，通过前端路由进行页面的切换。
SPA的主要特点就是在前后端分离的基础上添加了前端路由。
前端核心：改变URL页面不刷新。

实现前端路由

通过Hash
比如在控制台直接赋值location.hash改变href
HTML5中的history模式
这是一个栈，先进后出
history.pushState(三个参数)
第一个放数据，
第二个放title
第三个放url （在这里改变）
还可使用
history.back()=history.go(-1)
history.forword()=history.go(1)
这里出现的三个命令back,forword,go操作url

但在开发中使用vue-router进行开发

步骤一：前提
node npm webpack
然后安装npm中的插件plugin（vue-router）
步骤二：

第一步导入路由对象，调用Vue.use

import Vue from 'vue'
import Router from 'vue-router'

import Home from '../components/Home'
import About from '../components/About'


Vue.use(Router)
const routes =[
	{
		path:'/home',
		component:Home
	},
	{
		path:'/about',
		component:About
	}
]

export default new Router({
  routes
})

第二步：创建路由实例，传入路由映射配置

Vue.use(Router)
const routes =[
	{
		path:'/home',
		component:Home
	},
	{
		path:'/about',
		component:About
	}
]

第三步：在Vue实例中挂载创建的路由实例

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

这是使用Vue-router最基本的步骤。