博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

路由 组件

Posted on 2019-05-23 11:26  taigudaren  阅读(130)  评论(0)    收藏  举报
  1. 创建组件：创建单页面应用需要渲染的组件
  2. 创建路由：创建VueRouter实例
  3. 映射路由：调用VueRouter实例的map方法
  4. 启动路由：调用VueRouter实例的start方法
var Home = Vue.extend({
	template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
	data: function() {
		return {
			msg: 'Hello, vue router!'
		}
	}
})

var About = Vue.extend({
	template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
})

var router = new VueRouter()
router.map({
	'/home': { component: Home },
	'/about': { component: About }
})

div class="list-group">
	<a class="list-group-item" v-link="{ path: '/home'}">Home</a>
	<a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>

<router-view></router-view>
在页面上使用<router-view></router-view>标签，它用于渲染匹配的组件。

var App = Vue.extend({})
router.start(App, '#app')


Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件。

 

 

<!DOCTYPE html>
<html>
	<body>
		<div id="app">
			<!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
			<my-component></my-component>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
	
		// 1.创建一个组件构造器
		var myComponent = Vue.extend({
			template: '<div>This is my first component!</div>'
		})
		
		// 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
		Vue.component('my-component', myComponent)
		
		new Vue({
			el: '#app'
		});
		
	</script>
</html>