Vue自定义路由

一、自定义路由

1.1、导入router的js库

<!--导入路由的js库-->
<script src="assets/vue-router.min-2.7.0.js"></script>

1.2、定义模板

显示用户列表的模板

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

添加用户的模板

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

1.3、创建router对象

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