博客

在开发项目的过程中,经常会遇到某一个场景. eg:点击某个东西,会进入当前那个东西的详情页. 此时一般的处理方式就是需要获取到当前点击对象的id.跳转到新页面,根据这个id通过网络请求获取到详细的参数.

在vue中.假如我们创建了两个vue文件. 一个Aaa.vue,一个叫Bbb.vue文件.

在index.js文件中. 

import Videolist from '../pages/aaa/Aaa'
import Videodes from '../pages/bbb/Bbb'

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Aaa',
      component: Aaa
    },
    {
      path: '/Aaa',
      name: 'Aaa',
      component: Aaa
    },
    {
      path: '/Bbb',
      name: 'Bbb',
      component: Bbb
    }

  ]
})

如果我们只需要跳转到对应的页面,不需要传参.那我们仅需

this.$router.push('./Aaa')

此时如果需要传参

this.$router.push(
  {
    name:'Table',
    params:{
      id:id,
      name:name
    }
  }
);
this.$router.push(
  {
    name:'Table',
    query:{
      id:id,
      name:name
    }
  }
);
如果使用params 地址栏为  eg:http://localhost:8080/Bbb;
如果使用query  地址栏为  eg:http://localhost:8080/Bbb?id=1&name=duccky1;

然后在对应的Bbb页面
如果使用params
mounted(res){
    var id = this.$route.params.id;
    var name = this.$route.params.name;
},
如果使用query
mounted(res){
    var id = this.$route.query.id;
    var name = this.$route.query.name;
},

这里需要注意的一个小坑:

在不传参时:

我们可以直接this.$router.push(‘./Bbb’)或者this.$router.push(‘./bbb’) 大小写不敏感

如果我们需要传参的时候

this.$router.push(
    {
        name:’Table’,
        params:{
            id:id,
            name:name
        }
    }
);

这里的name必须和index.js注册的name名字完全相同.否则会无法跳转