vue路由跳轉傳引數demo
阿新 • • 發佈:2019-01-26
vue中路由跳轉傳引數有多種,自己常用的是下面的幾種
- 通過router-link進行跳轉
- 通過程式設計導航進行路由跳轉
1. router-link
<router-link
:to="{
path: 'yourPath',
params: {
name: 'name',
dataObj: data
},
query: {
name: 'name',
dataObj: data
}
}" >
</router-link>
- path -> 是要跳轉的路由路徑,也可以是路由檔案裡面配置的 name 值,兩者都可以進行路由導航
- params -> 是要傳送的引數,引數可以直接key:value形式傳遞
- query -> 是通過 url 來傳遞引數的同樣是key:value形式傳遞
// 2,3兩點皆可傳遞
2. $router方式跳轉
// 元件 a
<template>
<button @click="sendParams">傳遞</button>
</template >
<script>
export default {
name: '',
data () {
return {
msg: 'test message'
}
},
methods: {
sendParams () {
this.$router.push({
path: 'yourPath',
name: '要跳轉的路徑的 name,在 router 資料夾下的 index.js 檔案內找',
params: {
name: 'name' ,
dataObj: this.msg
}
/*query: {
name: 'name',
dataObj: this.msg
}*/
})
}
},
computed: {
},
mounted () {
}
}
</script>
<style scoped></style>
----------------------------------------
// 元件b
<template>
<h3>msg</h3>
</template>
<script>
export default {
name: '',
data () {
return {
msg: ''
}
},
methods: {
getParams () {
// 取到路由帶過來的引數
let routerParams = this.$route.params.dataobj
// 將資料放在當前元件的資料內
this.msg = routerParams
}
},
watch: {
// 監測路由變化,只要變化了就呼叫獲取路由引數方法將資料儲存本元件即可
'$route': 'getParams'
}
}
</script>
<style scoped></style>
這次專案就遇到了這些問題, 希望能幫助到大家!