這篇文章將為大家詳細(xì)講解有關(guān)vue-router傳參的方式有哪些，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)是一家專業(yè)提供連城企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、成都網(wǎng)站建設(shè)、H5頁(yè)面制作、小程序制作等業(yè)務(wù)。10年已為連城眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。包含的功能有：

1. 嵌套的路由/視圖表

2. 模塊化的、基于組件的路由配置

3. 路由參數(shù)、查詢、通配符

4. 基于 Vue.js 過(guò)渡系統(tǒng)的視圖過(guò)渡效果

5. 細(xì)粒度的導(dǎo)航控制

6. 帶有自動(dòng)激活的 CSS class 的鏈接

7. HTML5 歷史模式或 hash 模式，在 IE9 中自動(dòng)降級(jí)

8. 自定義的滾動(dòng)條行為

vue-router傳參兩種方式：params和query

params、query是什么？

    params：/router1/:id ，/router1/123，/router1/789 ,這里的id叫做params
     query：/router1?id=123 ,/router1?id=456 ,這里的id叫做query。

方法1：

    query 方式傳參和接收參數(shù)

    傳參：      

this.$router.push({
       path:'/openAccount',
       query:{id:id}
     });

     接收參數(shù)：

        this.$route.query.id

     注意：傳參是this.$router,接收參數(shù)是this.$route
     兩者區(qū)別：

        $router為VueRouter實(shí)例，想要導(dǎo)航到不同URL，則使用$router.push方法

        $route為當(dāng)前router跳轉(zhuǎn)對(duì)象，里面可以獲取name、path、query、params等

方法2：

    params方式傳參和接收參數(shù)

    傳參：

  this.$router.push({
       name:'/openAccount',
       params:{
         id: id
       }
     })

    接收參數(shù): this.$route.params.id

    注意:params傳參，push里面只能是 name:'xxxx',不能是path:'/xxx',因?yàn)閜arams只能用name來(lái)引入路由，如果這里寫成了path，接收參數(shù)頁(yè)面會(huì)是undefined?。。?/p>

    二者還有點(diǎn)區(qū)別，可以理解為：query相當(dāng)于get請(qǐng)求，頁(yè)面跳轉(zhuǎn)的時(shí)候，可以在地址欄看到請(qǐng)求參數(shù)，而params相當(dāng)于post請(qǐng)求，參數(shù)不會(huì)再地址欄中顯示

router.js

export default new Router({
 routes: [
  {
   path: '/',
   name: 'login',
   component: Login
  },
  {
   path: '/register',
   name: 'register',
   component: Register
  }
})

組件（傳參）：

組件（接收參數(shù)）

關(guān)于vue-router傳參的方式有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。