因为去官方看英文文档 对例子探索了下 所以 自己也写了一个简单的demo：
<body> <div id="app"> <h1>hello</h1> <p> <!--dong tai she zhi can shu--> <router-link :to="{ name: 'foo', params: { id: id }}">go to foo</router-link> //绑定路由和动态参数 <router-link to="/bar/3">go to bar</router-link> </p> <router-view></router-view> //显示组件的地方 </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script> //define route components const Foo = {template:"<div>foo{{$route.params.id}}</div>"}; //用 $route.params.id 打印传入ID
const Bar = {template:"<div>bar{{$route.params.id}}</div>"};const routes = [ { path: '/foo/:id', component: Foo, name: 'foo' //设置路由 的一些配置 }, { path: '/bar/:id', component: Bar } ]; const router = new VueRouter({ routes: routes }); const app = new Vue({ router, data:{ id: 1 //需要传入的参数 } }). $mount( '#app'); </ script >
扫一扫
361
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
