Vue 04 （路由SPA的实现）

const Home = Vue.extend({});

注意：

①extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用car组件。

②也可以用以前的方式创建和获得组件，效果也是一样的。
Vue.component("button-counter", {...});//创建组件
var ButtonCounter = Vue.component('button-counter');//获得组件

第三步：定义路由与组件的对应关系

var routes = [{path: '/about',component: About}];

注意：根路径“/”

第四步：生成路由对象然后传 `routes` 配置

const router = new VueRouter({routes:routes});

注意:

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

第五步：将vue对象挂载到vue实例中

var vm = new Vue({router: router}).$mount('#app');

第六步：定义锚点

第七步：触发锚点事件

首页

步骤解析如图所示：

代码块展示：


html>
<html>
	<head>
		<meta charset="utf-8">
		
		<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/2.6.0/vue-router.js">script>
		<title>1、路由SPAtitle>
	head>
	<body>
		
		<div id="app">
			
			<router-link to="/home">首页router-link>
			<router-link to="/about">关于router-link>
			
			<router-view>router-view>
		div>
		<script type="text/javascript">
			///2、定义组件  --->首页对应的组件、关于对应的组件
			// const/let/var
			const Home = Vue.extend({
				template:'这是首页内容，展示最新的10篇博客
'
			})
			const About = Vue.extend({
				template:'这是关于本站显示的内容，本站的发展史。。。。
'
			})
			// 3/定义路由与组件的对应关系
			let routes = [
				{path:'/home',component:Home},
				{path:'/about',component:About},
			]
			// 4、生成路由对象
			const router = new VueRouter({routes:routes})
			new Vue({
				el:'#app',
				router,//5、将vue对象挂载到vue实例中
				data(){
					return{
						msg:'hello,我是一杯咖啡！'
					}
				}
			})
		script>
	body>
html>