vue路由 ：vue-router

后端路由：url请求地址与服务器之间的对应关系。
前端路由：根据不同的用户时间，显示不同的页面内容 本质：用户事件于事件处理函数之间的对应关系。
eg: SPA 单页面应用程序。

Vue Router

Vue Router 是vue的官网的路由管理器。

1.引入相关的库文件
vue。js和vue-router。js文件夹

2.添加路由链接

 <router-link to='/user'>user</router-link>

3.添加路由填充位（占位符）

  <router-view></router-view>

4.定义路由组件

 const User= {
  template:`<div>User组件</div>`
 }

5.配置路由规则并创建路由实例

`var router= new VueRouter({
//routes是路由规则数组
	routes：[
		{path:'user',
		component:User
		}]
 }）`

++++++++++

new Vue（{
	el:'#app',
	data：{},
	//为了能够让路由规则生效，必须把路由对象挂载在vue实例对象上。
	router
	});

路由重定向

var router = new VueRouter({
	routes:[
	{path:'/',redirect:/user},
	{path:'/user',component:User},
	]
})

嵌套路由

<p>
	<router-link to='/user'>User</router-link>
	<router-link to='/register'>Register</router-link>
</p>
<div>
    //控制组件的显示位置
	<router-view></router-view>
</div>

 const Register= {
  template:`<div>
    <h1> Register</h1>
    //子路由链接
    <router-link to='/register/tab1'>Tab1</router-link>
    <router-link to='/register/tab2'>Tab2</router-link>

	//子路由的占位符
	<router-view />
  </div>`
 }
 const Tab1= {
  template:`<div>1</div>`
 }
  const Tab2= {
  template:`<div>2</div>`
 }

const router = new VueRouter({
	routes:[
	{path:'/',redirect:/user},
	{path:'/user',component:User},
	{path:'/register',
	component:Register,
	children:{
			{path:'/register/tab1',component:Tab1},
			{path:'/register/tab2',component:Tab2},
		}
	},]
})

vue-router编程式导航

1.声明式导航：通过点击链接实现导航的方式。 eg：普通网页中的<a></a>链接或者vue中的<router-link></router-link>

2.编程式导航：通过调用javascript形式的api实现导航的方式 eg:普通网页中的location.href
this. $router.push（'hash地址'）
this. $router.go（n） 前进后退 ，n是个数值