vue构建单页面应用实战

11. 组件跳转传参

组件之间的跳转传参，也是一种非常常见的情况。下面为列表页，增加跳转到详情页的跳转，并传参 id 给详情页

修改路由 routes.js

module.exports = {
 '/': {
  component: require('./components/index')
 },
  '/list': {
  component: require('./components/list')
 },
 //增加详情页的跳转路由，并在路径上加上id传参，具名为name：show
  '/show/:id': {
   name:"show",
   component: require('./components/show')
  },
 '*': {
  component: require('./components/notFound')
 }
}

添加组件 show

components/show.js

module.exports = {
 template: require('../templates/show.html'),
 data:function(){
  return {};
 },
 created:function(){
  //获取params的参数ID
  var id=this.$route.params.id;
  //根据获取的参数ID，返回不同的data对象（真实业务中，这里应该是Ajax获取数据）
  if (id==1){
   this.$data={"id":id,"name":"hello111","age":24};
  }else{
    this.$data={"id":id,"name":"hello222","age":28};
  }
 },
 ready: function () {
  console.log(this.$data);
 }
};

templates/show.html

<h1>Show</h1>
<hr/>
<p>Hello show page!</p>
<p>id:${id}</p>
<p>name:${name}</p>
<p>age:${age}</p>

修改 templates/item.html

 
<p>我是subitem： <a v-link=”{name:’show’,params: { ‘id’: id } }”> ${id} : ${name}</a> </p>

这里 name:‘show’ 表示具名路由路径，params 就是传参。

继续浏览器里点到详情页试试：

点击“hello11”，跳转到详情页：

传参逻辑成功。

12. 嵌套路由

仅有路由跳转是远远不够的，很多情况下，我们还有同一个页面上，多标签页的切换，在 vue 中，用嵌套路由，也可以非常方便的实现。

添加两个小组件

components/tab1.js

module.exports = {
 template: "<p>Tab1 content</p>"
};

components/tab2.js

module.exports = {
 template: "<p>Tab2 content</p>"
};

修改 components/index.js 组件，挂载这两个子组件