<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="js/vue.js" ></script> <!--- 第一步,将vue-router的源代码引入---> <script src="js/vue-router.js" ></script> </head> <body> <div id="app"> <div class="container"> <ul class="nav nav-pills"> <!--- 使用router-link 进行跳转 ---> <li><router-link to="/index">首页</router-link></li> <li><router-link to="/books">图书列表</router-link></li> <li><router-link to="/games">游戏列表</router-link></li> <li><router-link to="/i">首页</router-link></li> <li><a href="javascript:;"><span @click="goWhere()">传参数游戏列表</span></a></li> </ul> <div> <!--- 使用router-view 进行显示 ---> <router-view></router-view> <router-view name="a"></router-view> <router-view name="b"></router-view> </div> </div> </div> <script> var router = new VueRouter({ routes:[ { path : "/index", alias : "/i", components : { default : { template : "<h1>首页</h1>" }, a : { template : "<h1>这个是a视图的页面</h1>" }, b : { template : "<h1>这个是b视图的页面</h1>" } } }, { path:"/books", alias:"/b", component:{ template:"<h2>我是图示列表</h2>" } }, { path:"/games/:username" , name:"game", component:{ template:"<h2>游戏列表{{$route.params.username}}</h2>" } }, { path : "*",//页面不能匹配过后跳转到 redirect : "/index" } ] }); new Vue({ data : { username : "刘德华" }, router : router, methods : { goWhere: function () { // this.$router.go(-1); //返回上一个 // router.go(-1); //返回上一个 // router.push({path : '/games'}); router.push({name : 'game',params:{username : this.username} }); } } }).$mount("#app"); </script> </body> </html>
Vue---router--项目组件传参数
最新推荐文章于 2023-02-28 15:06:07 发布