路由构建

页面结构

<body>
    <div id="app">
        <h1>路由操作</h1>

        <!-- 路由渲染组件 -->
        <router-view></router-view>

        <br />

        <!-- 路由跳转组件 -->
        <router-link to="/list1">跳转列表1路由</router-link>
        <router-link to="/list2">跳转列表2路由</router-link>
    </div>
</body>

<script src="./vue.min.js"></script>
<!--要引入路由组件-->
<script src="./vue-router.js"></script>

逻辑结构

//路由组件
const List1 = { template: '<div>列表1</div>' }
const List2 = { template: '<div>列表2</div>' }

//定义路由列表
const routes = [
    { path: '/list1', component: List1 },
    { path: '/list2', component: List2 },
]

//创建路由对象
const router = new VueRouter({
    routes
})

//在全局中加载路由
var app = new Vue({
    el:'#app',
    router
})