Vue--路由

实现思路

1、确保引入Vue.vue-router的js依赖
2、首先需要定义组件（就是展示不同的页面效果）
3、需要将不同的组件放入一个容器中（路由集合）
4、将路由集合组装成路由器
5、将路由挂载到Vue实例中
6、定义锚点
7、跳转

实现代码

引入依赖库

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.2/vue-router.js"></script>

创建自定义组件，例如：Home和Abort组件

  注1：extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件
       你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用car组件
  注2：也可以用以前的方式创建和获得组件，效果也是一样的
       Vue.component("button-counter", {...});//创建组件
   var ButtonCounter = Vue.component('button-counter');//获得组件

// 创建组件
const Home = Vue.extend({
	template: '<div><p>首页</p><div>博主所写博客内容</div></div>'
});

const Abort = Vue.extend({
		template: '<div><p>关于本站</p><div>博主相关信息，运营内容</div></div>'
	});

定义路由(即路线)

// 添加url与组件的映射关系(组合路由)
		let routes =[
			{
				path:'/',
				component:Home,
			},
			{
				path:'/Home',
				component:Home,
			},
			{
				path:'/Abort',
				component:Abort,
			}
		]

创建路由器实例,然后传 routes 配置

// 将路由的集合组合成路由器
		let router = new VueRouter({routes});

 注1：route和router的区别
       route：路线
       router：路由器
       路由器中包含了多个路线

创建和挂载根实例

		new Vue({
			el:'#app',
			router,
			data:{
				msg:'hello vue!!!'
			}
		})

前面使用RouterLink和RouterView组件导航和显示

  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  <!-- 通过传入 `to` 属性指定链接. -->
  <router-link to="/home">go to Home</router-link>
  <!-- 使用RouterView组件显示. -->
  <router-view></router-view> 

<div id="app">
			<router-link to="/Home">首页</router-link>
			<router-link to="/Abort">关于本站</router-link>
			<router-view></router-view>
		</div>