vue 路由參數的獲取

路由的參數設置是路由的反斜杠加冒號，如下代碼：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/:id',
      name: 'HelloWorld',
      component: HelloWorld,
      props : true
    }
  ]
})
獲取路由的參數有兩種：
如下代碼中加參數1

<template>
  <div id="app">
    <router-link to = '/1'>當前頁</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
獲取參數id如下方法：

<template>
  <div class="hello">
    helloword
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props:['id'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
   console.log(this.$route.params.id);
   console.log(this.id)
  },
  methods:{

  }
}

可以通過this.$route.params.id,如果在路由中設置props屬性，這樣，就可以在組件中設置props屬性接收id那樣的話就可以通過this.id來獲取，這樣的方法更簡便。