模板

导入js库

template标签创建模板主题

<!--显示用户列表的模板(网页)-->
<template id="template01">
    <div>
        <h1>这是一个用户列表</h1>
        <p>
            这是一个表格,你需要点想象力
        </p>
    </div>
</template>

<!--添加用户的模板(网页)-->
<template id="template02">
    <div>
        <h1>这是一个添加用户的网页</h1>
    </div>
</template>

在网页展示模板

<div id="app">
  <hello1></hello1>
  <hr>
  <hello2></hello2>
</div>

创建Vue实例,注册模板事件

<script>
    // 将用户列表模板注册到Vue
    Vue.component('hello1', {
        template: '#template01',
        //template:'#template02',
    });

    // 将用户添加模板注册到Vue
    Vue.component('hello2',{
        template:'#template02',
    })
    
    
new Vue({
        el: '#app',
        router:router
    })
</script>

模板效果

路由

添加模板内容

<!--显示用户列表的模板(网页)-->
<template id="template01">
    <div>
        <h1>这是一个用户列表</h1>
        <p>
            这是一个表格,你需要点想象力
        </p>
    </div>
</template>

<!--添加用户的模板(网页)-->
<template id="template02">
    <div>
        <h1>这是一个添加用户的网页</h1>
    </div>
</template>

绑定模板和创建router对象

var pageUserList = {
    template: '#template01'
}

var pageUserAdd = {
    template: '#template02'
}

// 创建路由对象
var router = new VueRouter({
    routes:[
        {path:'/user_list',component:pageUserList},
        {path: '/user_add',component: pageUserAdd}
    ]
})

绑定路由对象到Vue实例

new Vue({
    el: '#app',
    router:router  // 绑定路由对象
})