Vue路由：安装、配置、基本使用

Vue-Router路由中的映射关系

一、路由

路由是通过互联网把信息从源地址传输到目的地址的活动

通过映射表进行路由和转发，这个映射表表示了数据包转向哪里

1.1前端渲染、后端渲染

阶段1：后端路由，后端渲染

网页最早用的都是后端渲染，原本用的大多数都是jsp（java server page），php等

服务器直接生产生成好url对应的html页面，返回给客户端展示

一个页面有自己对应的url，url会发送到服务器，服务器通过正则对该url进行匹配，最后交给一个Controller进行处理，Controller进行各种处理后最终生成html或者数据，返回给前端，这就完成了一个IO操作

当有多个页面时，服务器会处理url和页面的映射关系，这样的路由是后端路由

这样的网页的模块是由后端人员来编写，前端人员如果要开发页面还要学java、php，而且html代码和数据以及对应的逻辑会混在一起，难以维护

阶段2：前后分离阶段

随着Ajax的出现，有了前后分离的开发模式，后端只负责提供API来返回数据，前端通过Ajax来获取数据，并通过JavaScript将数据渲染到页面中

这样最大的好书是，前后端责任清晰，后端专注数据，前端专注交互和可视，并且在移动端上后端不需要进行任何处理，依然可以使用原有的API

阶段3：前端路由，SPA单页面复应用

在前后分离的基础上加了一层前端路由，由前端来维护路由规则

一旦url发生改变，整个页面不进行整体刷新，只是渲染了不同的组件

1.2 url的hash和HTML5的历史

这是两种更改url但不刷新的方式

location.hash='aaa'

history.pushState({},'','aaa')

history是一种类似栈的结构，url显示的永远是栈顶的元素，调用history.back()或者history.go(-1)会出栈，然后url变成了现有的栈顶。go()可以通过传入的参数来确定是向前还是向后，以及向前几步、向后几步

history.replaceState()函数会替换栈顶，用back不会回到上一个栈顶

二、vue-router安装和配置方式

目前前端流行的三大框架：

• Angular的ngRouter
• React的ReactRouter
• Vue的vue-router

vue-router是Vue.js官方的路由插件，适用于构建单页面应用，路由用于设定访问路径，将路径和组件映射起来，在vue-router的单页面应用中，页面的路径改变就是组件的切换

2.1安装

npm install vue-router --save

2.2在模块化工程中使用

step1：导入路由对象，调用Vue.use(VueRouter)

step2：创建酷游实例，并传入路由映射配置

step3：在vue实例中挂在创建的路由实例

在index.js中：

//配置路由的相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

//1、通过Vue.js(插件)，安装插件
Vue.use(VueRouter)

//2、创建VueRouter，配置映射关系
const routes=[
	
]
const router=new VueRouter({
	routes
})

//3、将router对象传入到Vue实例
export default router

然后再main.js中导入这个router

import Vue from 'vue'
import App from './App.vue'
//导入router
import router from './router/index.js'

Vue.config.productionTip = false

new Vue({
	router,//挂在router
  render: function (h) { return h(App) }
}).$mount('#app')

2.3使用router的步骤

step1：创建路由组件

home.vue:

<template>
	<div>
		<h2>home</h2>
	</div>
</template>

<script>
	export default {
		name:'home'
	}
</script>

<style>
</style>

About.vue

<template>
	<div>
		<h2>About</h2>
	</div>
</template>

<script>
	export default {
		name:'About'
	}
</script>

<style>
</style>

step2：配置路由映射

index.js

//配置路由的相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'
//导入组件
import home from '../components/home.vue'
import about from '../components/About.vue'

//1、通过Vue.js(插件)，安装插件
Vue.use(VueRouter)

//2、创建VueRouter，配置映射关系
const routes=[
	{
		path:'/home',
		component:home
	},{
		path:'/about',
		component:about
	}
]
const router=new VueRouter({
	routes
})

//3、将router对象传入到Vue实例
export default router

step3：通过<router-link to='\...'>来跳转到相应的组件，用<router-view>来决定这个组件要渲染到哪里

App.vue:

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
		<router-link to="/About">关于我</router-link>
		<router-view></router-view>
  </div>
</template>
<script>
	export default {
		name:'App'
	}
</script>

<style>

</style>

2.4 路由的重定向

routes={
		path:'',
		redirect:'/home'
	}

2.5 路径改成history模式

const router=new VueRouter({
	routes,
	mode:'history'//把路径改成history模式
})