vue笔记之路由

<style type="text/css">
	.router-link-active,.active{color:red;font-weight: 700;font-style:italic;font-size:80px;text-decoration: underline;}
	.v-enter,.v-leave-to{opacity: 0;transform: translateX(140px);}
	.v-enter-active,.v-leave-active{transition: all 0.5s ease}
</style>
<div id="app">
	<!-- <a href="#/login">登录</a>
	<a href="#/register">注册</a> -->
	<!-- router-link默认渲染为一个a标签 -->
	<router-link to="/login" tag="span">登录</router-link>
	<router-link to="/register">注册</router-link>
	<!-- 这是vue-router提供的元素，专门用来当作占位符的，将来路由规则匹配到的组件就会展示到router-view -->
	<transition mode="out-in">
		<router-view></router-view>
	</transition>
</div>

//组件模版对象
		var login = {
			template:"<h1>登录组件</h1>"
		}
		var register = {
			template:"<h1>注册组件</h1>"
		}
		//创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有一个路由的构造函数，叫做VueRouter
		//在new路由对象的时候，可以为构造函数，传递一个配置对象
		var routerObj = new VueRouter({
			//route //这个配置对象中的router表示路由匹配
			routes:[//路由匹配规则
				//每个路由规则，都是一个对象，这个规则对象，身上，有两个必须的属性；
				//属性1是path，表示监听哪个路由链接地址
				//属性2是component，表示如果路由是前面匹配到的path，则表示component属性对应的那个组件
				//component的属性值，必须是一个组件的模版对象，不能是组件的引用名称
				// {path:'/',component:login},
				{path:'/',redirect:'/login'},//这里的redirect和node中的redirect完全是两码事
				{path:'/login',component:login},
				{path:'/register',component:register}
			],
			//修改默认样式名router-link-active
			linkActiveClass:'active'
		})
		var vm = new Vue ({
			el:'#app',
			data:{},
			methods: {
				
			},
			router:routerObj,//将路由规则对象注册到vm实例上，用来监听url地址的变化，然后展示对应的组件
			filters:{},//私有过滤器
			directives:{},//私有指令
			
			// 生命周期
			beforeCreate(){},
			created(){},
			beforeMount(){},
			mounted(){},
			beforeUpdate(){},
			updated() {},
			beforeDestroy(){},
			destroyed(){}

		});