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来获取，这样的方法更简便。