核心提示：因为去官方看英文文档 对例子探索了下 所以 自己也写了一个简单的demo：bodyp id=apph1hello/h1p!--dong tai she zhi can shu--router-link...
因为去官方看英文文档 对例子探索了下 所以 自己也写了一个简单的demo：
<body>
<p 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> //显示组件的地方
</p>
</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:"<p>foo{{$route.params.id}}</p>"}; //用 $route.params.id 打印传入ID
const Bar = {template:"<p>bar{{$route.params.id}}</p>"};
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>
