生活随笔
收集整理的這篇文章主要介紹了
路由的query参数
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- Message組件發送query參數
- Detail組件接收query參數
本例基于 路由的基本使用、嵌套路由的實現。
項目目錄如下：
- 一般組件components/Banner.vue
<template><div class="col-xs-offset-2 col-xs-8"><div class="page-header"><h2>Vue Router Demo
</h2></div></div>
</template><script>
export default {name:"Banner"
}
</script><style></style>
<template><div><h2>Home組件內容
</h2><div><ul class="nav nav-tabs"><li><router-link class="list-group-item" active-class="active" to="/home/news">News
</router-link></li><li><router-link class="list-group-item" active-class="active" to="/home/message">Message
</router-link></li></ul><div><router-view></router-view></div></div></div>
</template><script>
export default {name:'Home'
}
</script><style></style>
<template><h2>我是About的內容
</h2>
</template><script>
export default {name:'About'
}
</script><style></style>
<template><ul><li>news001
</li><li>news002
</li><li>news003
</li></ul>
</template><script>
export default {name:"News"
}
</script><style></style>
<template><div><ul><li v-for="message in messageList" :key="message.id"><router-link :to="{path:'/home/message/detail',query:{id:message.id,title:message.title}}">{{message.title}}
</router-link></li></ul><hr><router-view></router-view></div>
</template><script>
export default {name:"Message",data(){return {messageList:[{id:"001",title:"消息01"},{id:"002",title:"消息02"},{id:"003",title:"消息03"},]}}
}
</script><style></style>
<template><ul><li>消息編號：{{$route.query.id}}
</li><li>消息標題：{{$route.query.title}}
</li></ul>
</template><script>
export default {name:"Detail"}
</script><style></style>
- 創建路由器，配置路由規則，router/index.js
import VueRouter
from "vue-router";
import Home
from "../pages/Home";
import About
from "../pages/About";
import News
from "../pages/News";
import Message
from "../pages/Message";
import Detail
from "../pages/Detail";export default new VueRouter({routes
:[{path
:"/about",component
:About
},{path
:"/home",component
:Home
,children
:[{path
:"message",component
:Message
,children
:[{path
:"detail",component
:Detail
}]},{path
:"news",component
:News
}]}]
})
<template><div><div class="row"><Banner/></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><router-link to="/about" active-class="active" class="list-group-item">About
</router-link><router-link to="/home" active-class="active" class="list-group-item">Home
</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><router-view></router-view></div></div></div></div></div>
</template><script>
import Banner from "./components/Banner.vue";export default {name: 'App',components:{Banner}
}
</script>
import Vue
from 'vue'
import App
from './App.vue'
import VueRouter
from "vue-router";import router
from "./router/index";Vue
.config
.productionTip
= false;Vue
.use(VueRouter
);new Vue({render
: h
=> h(App
),router
:router
}).$mount('#app')
啟動應用，測試效果。
Message組件發送query參數
路由的query參數傳遞發生在路由組件Message.vue、路由組件Detail.vue之間，query參數通過to屬性傳遞，有以下兩種方式：
字符串寫法
<router
-link
:to
="`/home/message/detail?id=${message.id}&title=${message.title}`">{{message
.title
}}</router
-link
>
對象寫法
<router
-link
:to
="
{path
:'/home/message/detail',query
:{id
:message
.id
,title
:message
.title
}
}"
>{{message
.title
}}
</router
-link
>
Detail組件接收query參數
<ul><li>消息編號：{{$route.query.id}}
</li><li>消息標題：{{$route.query.title}}
</li>
</ul>
總結
以上是生活随笔為你收集整理的路由的query参数的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
