文章目錄

• • • • 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>

• 路由組件pages/Home.vue

<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>

• 路由組件pages/About.vue

<template><h2>我是About的內容</h2> </template><script> export default {name:'About' } </script><style></style>

• 路由組件pages/News.vue

<template><ul><li>news001</li><li>news002</li><li>news003</li></ul> </template><script> export default {name:"News" } </script><style></style>

• 路由組件pages/Message.vue

<template><div><ul><li v-for="message in messageList" :key="message.id"><!-- <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></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>

• 路由組件pages/Detail.vue

<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}]}] })

• 組件App.vue

<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>

• 入口文件main.js

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参数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。