[vue]路由的query参数

步骤

1. 传递参数


<router-link :to&＃61;"/home/message/detail?id&＃61;666&title&＃61;你好">跳转router-link>
<router-link :to&＃61;"{path:&＃39;/home/message/detail&＃39;,query:{id:666,title:&＃39;你好&＃39;}}"
>跳转router-link>


2. 接收参数&＃xff1a;

$route.query.id
$route.query.title


代码分析&＃xff1a;

效果

效果

完整代码

main.js

//引入Vue
import Vue from &＃39;vue&＃39;
//引入App
import App from &＃39;./App.vue&＃39;
//引入VueRouter
import VueRouter from &＃39;vue-router&＃39;
//引入路由器
import router from &＃39;./router&＃39;//关闭Vue的生产提示
Vue.config.productionTip &＃61; false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:&＃39;#app&＃39;,render: h &＃61;> h(App),router:router
})

App.vue

<template><div><div class&＃61;"row"><Banner/></div><div class&＃61;"row"><div class&＃61;"col-xs-2 col-xs-offset-2"><div class&＃61;"list-group"><!-- Vue中借助router-link标签实现路由的切换 --><router-link class&＃61;"list-group-item" active-class&＃61;"active" to&＃61;"/about">About</router-link><router-link class&＃61;"list-group-item" active-class&＃61;"active" to&＃61;"/home">Home</router-link></div></div><div class&＃61;"col-xs-6"><div class&＃61;"panel"><div class&＃61;"panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div></div></div></div></div>
</template><script>import Banner from &＃39;./components/Banner&＃39;export default {name:&＃39;App&＃39;,components:{Banner}}
</script>

router/index.js

// 该文件专门用于创建整个应用的路由器
import VueRouter from &＃39;vue-router&＃39;
//引入组件
import About from &＃39;../pages/About&＃39;
import Home from &＃39;../pages/Home&＃39;
import News from &＃39;../pages/News&＃39;
import Message from &＃39;../pages/Message&＃39;
import Detail from &＃39;../pages/Detail&＃39;//创建并暴露一个路由器
export default new VueRouter({routes:[{path:&＃39;/about&＃39;,component:About},{path:&＃39;/home&＃39;,component:Home,children:[{path:&＃39;news&＃39;,component:News,},{path:&＃39;message&＃39;,component:Message,children:[{path:&＃39;detail&＃39;,component:Detail,}]}]}]
})

About.vue

<template><h2>我是About的内容</h2>
</template><script>export default {name:&＃39;About&＃39;,}
</script>


Home.vue

<template><div><h2>Home组件内容</h2><div><ul class&＃61;"nav nav-tabs"><li><router-link class&＃61;"list-group-item" active-class&＃61;"active" to&＃61;"/home/news">News</router-link></li><li><router-link class&＃61;"list-group-item" active-class&＃61;"active" to&＃61;"/home/message">Message</router-link></li></ul><router-view></router-view></div></div>
</template><script>export default {name:&＃39;Home&＃39;,}
</script>


News.vue

<template><ul><li>news001</li><li>news002</li><li>news003</li></ul>
</template><script>export default {name:&＃39;News&＃39;}
</script>


Message.vue

<template><div><ul><li v-for&＃61;"m in messageList" :key&＃61;"m.id"><!-- 跳转路由并携带query参数&＃xff0c;to的字符串写法 --><!-- <router-link :to&＃61;"&＃96;/home/message/detail?id&＃61;${m.id}&title&＃61;${m.title}&＃96;">{{m.title}}</router-link>&nbsp;&nbsp; --><!-- 跳转路由并携带query参数&＃xff0c;to的对象写法 --><router-link :to&＃61;"{path:&＃39;/home/message/detail&＃39;,query:{id:m.id,title:m.title}}">{{m.title}}</router-link></li></ul><hr><router-view></router-view></div>
</template><script>export default {name:&＃39;Message&＃39;,data() {return {messageList:[{id:&＃39;001&＃39;,title:&＃39;消息001&＃39;},{id:&＃39;002&＃39;,title:&＃39;消息002&＃39;},{id:&＃39;003&＃39;,title:&＃39;消息003&＃39;}]}},}
</script>


Detail.vue

<template><ul><li>消息编号&＃xff1a;{{$route.query.id}}</li><li>消息标题&＃xff1a;{{$route.query.title}}</li></ul>
</template><script>export default {name:&＃39;Detail&＃39;,mounted() {console.log(this.$route)},}
</script>


Vue-router命名路由和参数的传递