Vue.js的路由參數

這次帶給大家Vue.js的路由參數，使用Vue.js的路由參數的注意事項有哪些，下面就是實戰案例，一起來看一下。

作用:為頁面傳遞路由參數.

在路由映射表中配置需要傳遞的參數:
例如:apple頁面,我需要傳遞一個color的參數,可以在path中以:開頭設定參數.

path: '/apple/:color',

具體使用:

let router = new VRouter({ // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',  routes: [    //  做一个映射表
    {      path: '/apple/:color',      component: Apple
    },
    {      path: '/banana',      component: Banana
    }
  ]
})

#當我在頁面跳轉時,直接在地址後面拼接參數,下面的red,即為傳遞的color參數

http://localhost:8080/apple/red

在script標籤中取得頁面傳遞的參數,透過this.$route.params全域的物件來取得

<template>
  <div class="hello">
    <h1 id="msg">{{msg}}</h1>
    <button @click="getParams">get params</button>
  </div></template><script>
  export default {
    data () {      return {        msg: &#39;I am componnet apple&#39;
      }
    },    methods: {
      getParams () {        console.log(this.$route.params)
      }
    }
  }</script>

上面的列印結果為:

{color: "red"}

在template標籤中使用介面傳遞過來的參數,可以使用$route.params.color

<template>
  <div class="hello">
    <h1 id="msg">{{msg}}</h1>
    <p>{{$route.params.color}}</p>
    <button @click="getParams">get params</button>
  </div></template>

傳遞多個參數

路由中設定如下:

path: '/apple/:color/detail/:type',

傳遞參數的url:

http://localhost:8080/apple/red/detail/3

列印傳遞過來的所有參數:

{color: "red", type: "3"}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue.js的vue標籤屬性與條件渲染

Vue.js的清單渲染v -for 陣列物件子元件

#

以上是Vue.js的路由參數的詳細內容。更多資訊請關注PHP中文網其他相關文章！