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

嵌套的路由/視圖表 模塊化的、基于組件的路由配置 路由參數(shù)、查詢、通配符 基于 Vue.js 過渡系統(tǒng)的視圖過渡效果 細(xì)粒度的導(dǎo)航控制 帶有自動激活的 CSS class 的鏈接 HTML5 歷史模式或 hash 模式，在 IE9 中自動降級 自定義的滾動條行為

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實例，想要導(dǎo)航到不同URL，則使用$router.push方法

        $route為當(dāng)前router跳轉(zhuǎn)對象，里面可以獲取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',因為params只能用name來引入路由，如果這里寫成了path，接收參數(shù)頁面會是undefined！！！

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

router.js

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

組件（傳參）：

<template> <div class="hello">  <h1>{{ msg }}</h1>  <button @click="routerTo">click here to news page</button> </div></template><script>export default { name: 'HelloWorld', data () {  return {   msg: 'Welcome to Your Vue.js App'  } }, methods:{  routerTo(){   this.$router.push({ name: 'register', params: { userId: 123 }});//params方式 這里的name值是在定義route.js時中的name   //this.$router.push({ path: '/register', query: { userId: 123 }});  //query方式   } }}</script><style></style>