先给大家整个段子

有个小孩儿他姓王,这个段子就这么长!!!

言归正传

Vue Router

官网: https://router.vuejs.org/

介绍

官方解释: Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

通俗: 路由就是指向的意思,也可以说是一种映射.所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分.

三个组成

路由中有三个基本的概念 route,routes,router.

route: 由这个英文单词也可以看出来,它是单数,它是一条路由.
routes: 是一组路由,把上面的每一条路由组合起来,形成一个数组.
router 是一个机制,相当于一个管理者,它来管理路由.

页面实现一-HTML网页模板

html网页中定义了两个标签: <router-link>和<router-view>来对应点击和显示部分
<router-link>即为css中的<a>标签,其中的属性to即为<a>标签中的href属性

案例:

<div id="app">
	<router-link to="/kaozi">靠子</router-link>
	<router-link to="/anni">安妮</router-link>
	<router-view></router-view>
</div>
<template id="kaoziTemp">
	<div>
		<h1>怕啥来啥</h1>
	</div>
</template>
<template id="anniTemp">
	<div>
		<h1>我恁爹</h1>
	</div>
</template>
<script>
	let kaoziComp = {
		template: "#kaoziTemp"
	}
	let anniComp = {
		template: "#anniTemp"
	}
	let router = new VueRouter({
		routes: [
			{path: "/kaozi", component: kaoziComp},
			{path: "/anni", component: anniComp}
		]
	})
	const app = new Vue({
		el: "#app",
		router: router
	})

网页实现二-js中配置路由

首先要定义route,一条路由的实现.它是一个对象,由两个部分组成: path和component.path 指路径，component 指的是组件.

例如: 两条路由组合成为一个routes
```
 const routes=[
   {path: '/home', component: Home},
   {path: '/about', component: About}
 ]
```
创建router对路由进行管理,由构造函数 new vueRouter() 创建,接收routes 参数.
```
 const router = new VueRouter({
   routes	// routes: routes 的简写
 })
```
配置完成后,把router 实例注入到 vue 根实例中即可开始使用
```
 const app = new Vue({
   el: "#app"
   router
 })
```

路由嵌套

实际应用界面,通常由多层嵌套的组件组合而成.

案例:

<div id="app">
		<router-link to="/kaozi">靠子</router-link>
		<router-link to="/anni">安妮</router-link>
		<router-view></router-view>
	</div>
	<template id="kaoziTemp">
		<div>
			<h1>怕啥来啥</h1>
			<router-link to="/tianbin">导师田斌</router-link>
			<router-view></router-view>
		</div>
	</template>
	<template id="anniTemp">
		<div>
			<h1>我恁爹</h1>
		</div>
	</template>
	<template id="tianbinTemp">
		<div>
			<h2>十年导师无人问,一朝当儿天下知</h2>
		</div>
	</template>
	<script>
		let kaoziComp = {
			template: "#kaoziTemp"
		}
		let anniComp = {
			template: "#anniTemp"
		}
		let tianbinComp = {
			template: "#tianbinTemp"
		}
		let router = new VueRouter({
			routes: [
				{path: "/kaozi", component: kaoziComp,children: [
					{path: "/tianbin", component: tianbinComp}
				]},
				{path: "/anni", component: anniComp}
			]
		})
		const app = new Vue({
			el: "#app",
			router: router
		})
	</script>