Vue中的路由

Vue中的路由
1.先导入vue-router包

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2.在中创建路由对象

var routerObj = new VueRouter({
			//routes表示路由匹配规则
			routes: [
				//每个路由规则都是一个对象,有两个必须的属性1.path,2.compoent表示如果路由是前面匹配到的path则展示对应的那个组件
				//compoent的属性值是一个模板对象，不能是名称
				{
					path: '/',
					redirect:'/login'	//使用redirect可以重定向为指定页面
				},
				{
					path: '/login',
					component: login
				},
				{
					path: '/reg',
					component: reg
				}
			],
			// 第二种实现路由高亮提示linkActiveClass:'类'
			linkActiveClass:'myactive'
		})

3.在Vue实例中将路由对象注册到实例中

var vm = new Vue({
			el: '#app',
			data: {},
			methods: {},
			components: {},
			router: routerObj
		});

4.在Vue实例的标签中添加标签
，这个标签的意思是展示路由的容器

<router-view></router-view>