<!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> <button @click="surf">点击漫游信息</button> </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", name:"user", 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, methods: { surf: function () { setTimeout(function () { this.router.push("/about"); setTimeout(function () { this.router.push({name:"user",params:{name:"翠花"}}) // 这样传参，设置好定时器，自动跳转 }, 2000) }, 2000) } } })