<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue2.0路由嵌套2</title> <script type="text/javascript" src="js/vue2.0.js" ></script> <script type="text/javascript" src="js/vue-router.js" ></script> <style type="text/css"> .router-link-active{ font-size:18px; color: pink; } </style> </head> <body> <div id="box"> <input type="button" value="添加一个路由" @click="push"/> <input type="button" value="替换一个路由" @click="replace"/> <div> <!--组件--> <router-link to="/home">主页</router-link> <router-link to="/user">用户</router-link> </div> <div> <router-view></router-view> </div> </div> </body> </html> <script type="text/javascript"> /*组件*/ var Home = { template: '<h3>我是主页</h3>' } var User = { template: '<div><h3>我是用户信息</h3><ul><li><router-link to="/user/strive/age/10">Strive</router-link></li><li><router-link to="/user/blue/age/10">Blue</router-link></li><li><router-link to="/user/eric/age/10">Eric</router-link></li></ul><div><router-view></router-view></div></div>' } var UserDetail = { template: '<div>{{$route.params}}</div>' } /*配置路由 routes 变量名不可以写错*/ const routes = [ { path:'/home', component: Home }, { path:'/user', component: User, children: [//核心 {path: ':username/age/:age', component: UserDetail } ] }, /*重定向*/ { path:'*', redirect: 'home'} ]; /*配置路由实例*/ const router = new VueRouter({ /*路由名字*/ routes }) /*最后挂在vue上*/ var vm = new Vue({ router, methods: { push(){ /*直接添加一个路由，变现切换路由本质往历史记录里面添加一个，*/ router.push({path:'home'}) }, replace(){ router.push({path:'user'}) } } }).$mount('#box'); alert </script>
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/16544.html