<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router之实例讲解定义一下单页面路由:</title> <script src="vue.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="demo"> <router-link to="/ltphp">LTPHP</router-link> <router-link to="/ltcms">LTCMS</router-link> <router-view></router-view> </div> <script> const ltphp={ template:"<h1>ltphp</h1>" } const ltcms={ template:"<h1>ltcms</h1>" } let routes=[ {path:'/ltphp',component:ltphp}, {path:'/ltcms',component:ltcms} ] //要把组件交给路由器: let router=new VueRouter({routes}); new Vue({ el: "#demo", router }); </script> </body> </html>