Vue.js的路由参数

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
    }
  ]
})

http://localhost:8080/apple/red

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

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

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

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

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