<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div> <router-link to="/">首页</router-link> <router-link to="/about">关于我们</router-link> <router-link to="/user/翠花">翠花</router-link> <router-link to="/user/王老五">王老五</router-link> </div> <div> <router-view></router-view> </div> </div> <script src="../../lib/vue.js"></script> <script src="../../lib/vue-router.js"></script> <script src="js/main.js"></script> </body> </html>
var routes = [ { path:"/", component:{ template:` <div>首页</div> ` } }, { path:"/about", component:{ template:` <div>关于我们</div> ` } }, { path:"/user/:name", component:{ template:` <div> <div>我叫：{{$route.params.name}}</div> <router-link to="more" append>更多信息</router-link> <!--append更加智能的写法，直接在父级路由添加--> <router-view></router-view> </div> ` }, children:[ { path:"more", component:{ template:` <div> 用户：{{$route.params.name}}的详细信息 xxxxxxxxxxxxxxxx </div> ` } } ] } ]; var router = new VueRouter({ routes:routes }); new Vue({ el:"#app", router:router })