- 创建组件:创建单页面应用需要渲染的组件
- 创建路由:创建VueRouter实例
- 映射路由:调用VueRouter实例的map方法
- 启动路由:调用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>