Vue路由傳參數方法

path匹配路由傳參只能用query去接收參數，name來匹配路由只能用params去接收參數

方法一：用name傳遞參數

routes: [ { path: '/', name: 'Hello', component: Hello } ] 在相應路由裏接收 :console.log(this.$route.name) // Hello

方法二：使用name來匹配路由，而後經過params來接收參數

基本語法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link> 示例：<router-link :to="{name:'Home',params:{username:'jspang',id:'555'}}"></router-link> 在相應路由裏接收 :console.log(this.$route.params) // {username: "jspang", id: "555"}

方法三：使用path來匹配路由，而後經過query來接收參數 方法同：name來匹配路由傳參

示例：<router-link :to="{path:'/Home',query:{username:'jspang',id:'555'}}"></router-link> 在相應路由裏接收 :console.log(this.$route.query) // {username: "jspang", id: "555"}

方法四：利用url傳遞參數----在配置文件裏以冒號的形式設置參數。

示例：{ path:'/params/:newsId/:newsTitle', component:Params } <router-link to="/params/198/jspang website is very good">params</router-link>

方法五：直接再跳轉路徑後面拼接參數

示例： <router-link to="/GoodsInfo?a=1"></router-link> 在相應路由裏接收 :console.log(this.$route.query.a)