vue router路由跳轉帶參數方法以及帶參數後無法跳轉的問題

在開發項目的過程中,經常會遇到某一個場景. 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名字完全相同.否則會無法跳轉