router路由定义:index.js
import Vue from 'vue'
import Router from 'vue-router'
import Map from '@/components/Map'
import BaiDuMap from '@/components/BaiDuMap'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/Map',
name: 'Map',
component: Map
},
{
path: '/BaiDuMap',
name: 'BaiDuMap', //注意params需要这个属性name,是根据这个name进行跳转的
component: BaiDuMap
}
]
})
页面Map.vue =>BaiDuMap.vue
<template>
<div class="amap-page-container">
<p @click="hah">看得到路由携带的参数</p>
<p @click="hi">看不到路由携带的参数</p>
</div>
</template>
<script>
export default {
data () {
return {}
},
methods: {
hah () {
// 以下两种方式都是一样的
// this.$router.push({
// path: '/BaiDuMap?name=王大锤'
// })
this.$router.push({
path: '/BaiDuMap',
query: {
name: '哈哈哈'
}
})
},
hi () {
this.$router.push({
name: 'BaiDuMap',
params: {
name: '王小锤'
}
})
}
}
}
</script>
触发hah方法(query)
触发hi方法(params)
BaiDuMap.vue接受参数(前面是query,后面是params)
this.$route.query.name
this.$route.params.name
<template>
<div>
{{this.$route.query.name+'--------'+this.$route.params.name}}
</div>
</template>
<script>
export default {
// name: 'BaiDuMap',
data () {
return {}
}
}
</script>
用哪个主要取决于你是否需要隐藏参数,都可以用的。有什么不会欢迎留言。