Vue之Router路由传参之一query
一、目录结构
注:pages文件夹里为路由组件,route文件夹里为路由配置
二、main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
Vue.use(VueRouter)
Vue.config.productionTip = false
new Vue({
router:router,
render: h => h(App),
}).$mount('#app')
三、index.js
import VueRourter from 'vue-router'
import news from '../pages/news.vue'
export default new VueRourter({
routes:[{
path:'/news',
component:news
}]
})
四、App.vue
<template>
<div id="app">
<li v-for="n in news" :key="n.id">
<router-link :to="{
path:'/news',
query:{
id:n.id,
title:n.name,
detail:n.detail
}
}" >
{{n.title}}
</router-link>
</li>
<br>
<div>
<h1>展示区</h1>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{ news:[
{id:'001',title:'life',detail:'I love life'},
{id:'002',title:'sport',detail:'runing '},
{id:'003',title:'sing',detail:'singing...'}
]}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
五、news.vue
<template>
<div>
<h3>新闻细节</h3>
<li>title:{{$route.query.id}}</li>
<li>title:{{$route.query.title}}</li>
<li>detail:{{$route.query.detail}}</li>
</div>
</template>
<script>
export default {
name:'news',
}
</script>
六、总结
在中 :to绑定quuery项。然后在路由组件里用$route.query.属性接收。
七、效果