使用Vue-Router（路由） 创建单页应用。

首先在html中定义<router-link>链接效果类似于a标签。定义<router-view>创建路由视图。

<div id="app">
    <h1>使用Vue-Router路由制作单页程序</h1>
        <div>
           <router-link to="/stu">学生</router-link>
           <router-link to="/tea">老师</router-link>
           </div>
         <div>
        <router-view></router-view>
    </div>
</div>

在js文件中进行四步操作。

//            定义组件
            const Student = {template:"<div>这是学生div</div>"};
            const Teacher = {template:"<div>这是老师div</div>"};
            
//            定义路由列表
            const routers = [
                {path:"/stu",component:Student},
                {path:"/tea",component:Teacher}
            ]
//            实例路由
            var router = new VueRouter({routes:routers})
            
//            实例Vue,添加路由信息
            var vm = new Vue({
                el:"#app",
                router
            })