路由的参数设置是路由的反斜杠加冒号,如下代码:
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来获取,这样的方法更简便。