Vue Router 傳參方式:
1. this.$router.push({ name: '模塊名稱', params: { // 各參數 } })
router.js:
export default new Router({
routes: [
{
path: '/paramsPassingByRouter',
component: ParamsPassingByRouter,
children: [
{
path: 'paramsMode',
name: 'paramsMode',
component: ParamsMode
}
]
}
]
})
ParamsPassingByRouter.vue:
<!-- html -->
<button @click="paramsMode(testData)">params傳參</button>
<!-- js -->
<script>
export default {
data () {
return {
testData: {
id: '20180101',
name: '張三',
aka: 'z3',
age: '18'
}
}
},
methods: {
paramsMode (data) {
this.$router.push({
name: 'paramsMode',
params: this.testData
})
}
}
}
</script>
ParamsMode.vue:
<!-- html -->
<div class="params-mode">{{ testData }}</div>
<!-- js -->
<script>
export default {
data () {
return {
testData: {}
}
},
created () {
this.testData = this.$route.params
}
}
</script>
效果:
url:http://localhost:8081/#/paramsPassingByRouter/paramsMode
頁面顯示:{"id":"20180101","name":"張三","aka":"z3","age":"18"}
但是刷新頁面後,數據會丟失,顯示:{}。
2. this.$router.push({ name: '模塊名稱', query: { // 各參數 } })
router.js:
export default new Router({
routes: [
{
path: '/paramsPassingByRouter',
component: ParamsPassingByRouter,
children: [
{
path: 'queryMode',
name: 'queryMode',
component: QueryMode
}
]
}
]
})
ParamsPassingByRouter.vue:
<!-- html -->
<button @click="queryMode(testData)">query傳參</button>
<!-- js -->
<script>
export default {
data () {
return {
testData: {
id: '20180101',
name: '張三',
aka: 'z3',
age: '18'
}
}
},
methods: {
queryMode (data) {
this.$router.push({
name: 'paramsMode',
query: this.testData
})
}
}
}
</script>
QueryMode.vue:
<!-- html -->
<div class="query-mode">{{ testData }}</div>
<!-- js -->
<script>
export default {
data () {
return {
testData: {}
}
},
created () {
this.testData = this.$route.query
}
}
</script>
效果:
url:http://localhost:8081/#/paramsPassingByRouter/queryMode?id=20180101&name=%E5%BC%A0%E4%B8%89&aka=z3&age=18
頁面顯示:{"id":"20180101","name":"張三","aka":"z3","age":"18"}
刷新頁面後,數據不會丟失。
解決刷新頁面數據丟失的方案:
-
使用
this.$router.push({ name: '模塊名稱', query: { // 各參數 } })
方式傳參。缺點:參數值都拼接在 url 上,url 會很長,同時都可被看到。
-
this.$router.push({ name: '模塊名稱', params: { // 各參數 } })
路由文件設置的時候把參數拼到 url 裏。url:http://localhost:8081/#/paramsPassingByRouter/paramsMode/20180101/%E5%BC%A0%E4%B8%89/z3/18
缺點:同上。 -
老老實實的用 localStorage 存儲。
url: http://localhost:8081/#/paramsPassingByRouter/paramsMode/z3
可以和 params 方式配合使用,可以暴露的參數顯示在 url 上,同時刷新參數也不會丟失。// router.js { path: 'paramsMode/:aka', name: 'paramsMode', component: ParamsMode } <!-- ParamsMode.vue 修改 --> <script> export default { data () { return { testData: {} } }, created () { const tempData = localStorage.getItem('tempData') if (tempData) { this.testData = JSON.parse(tempData) } else { this.testData = this.$route.params localStorage.setItem('tempData', JSON.stringify(this.$route.params)) } }, beforeDestroy () { localStorage.removeItem('tempData') } } </script>