<!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> <div>我今年：{{$route.query.age}}岁了</div> <!--url传参--> </div> ` } } ]; var router = new VueRouter({ routes:routes }); new Vue({ el:"#app", router:router })
