vue-router

1.引入插件vue-router

<script type="text/javascript" src="./vue-router/dist/vue-router.js"></script>

2.使用vueRouter

		Vue.use(VueRouter);

　3.创建路由对象

var router = new VueRouter({
			// 4.配置路由对象
			routes:[
				// 路由匹配的规则
				{
					path:'/login',
					component:Login
				},
				{
					path:'/register',
					component:Register
				}
			]
		});

　　4.声明组件

var Login  = {
			template:`<div>我是登录页面</div>`
		};
		var Register  = {
			template:`<div>我是注册页面</div>`
		};

　　5.抛出全局组件

var App = {
			template:`
				<div>
					<!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
					<router-link to = '/login'>登录</router-link>
					<router-link to = '/register'>注册</router-link>
					
					<!--路由组件的出口-->
					<router-view></router-view>
				</div>
			`
		}

　　6.将配置好的路由对象放到实例化对象中

new Vue({
			el:'#app',
			router:router,
			template:`<App />`,
			components:{
				App
			}
		});

　　代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="app"></div>
	<!-- 1.先引入vue.js -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	<!-- 2.引包 引入 核心的插件vue-router -->
	<script type="text/javascript" src="./vue-router/dist/vue-router.js"></script>
	<script type="text/javascript">

		// 2.让vue使用该VueRouter创建
		Vue.use(VueRouter);


		//声明组件
		var Login  = {
			template:`<div>我是登录页面</div>`
		};
		var Register  = {
			template:`<div>我是注册页面</div>`
		};
		// 3.创建路由对象

		var router = new VueRouter({
			// 4.配置路由对象
			routes:[
				// 路由匹配的规则
				{
					path:'/login',
					component:Login
				},
				{
					path:'/register',
					component:Register
				}
			]
		});

		// 抛出两个全局的组件 router-link  router-view
		
		var App = {
			template:`
				<div>
					<!--router-link默认会被渲染成a标签，to默认会被渲染成href属性-->
					<router-link to = '/login'>登录</router-link>
					<router-link to = '/register'>注册</router-link>
					
					<!--路由组件的出口-->
					<router-view></router-view>
				</div>
			`
		}

		// Cannot read property 'matched' of undefined
		// 5.将配置好的路由对象关联到vue实例化对象中
		new Vue({
			el:'#app',
			router:router,
			template:`<App />`,
			components:{
				App
			}
		});
	</script>
	
</body>
</html>

　　效果：

 

posted @ 2018-08-26 18:22  1点  阅读(186)  评论(0)    收藏  举报