快捷導(dǎo)航

詳解vue嵌套路由-query傳遞參數(shù)

更新時(shí)間：2017年05月23日 09:38:51 作者：安靜的對(duì)折

本篇文章主要介紹了詳解vue嵌套路由-query傳遞參數(shù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在嵌套路由中我們經(jīng)常會(huì)遇到父路由向子路由里面?zhèn)鬟f參數(shù)，傳遞參數(shù)有兩種方法，通過 query 或者 params

index.html

<div id="app"> 
  <!-- router-view 路由出口, 路由匹配到的組件將渲染在這里 --> 
  <router-view></router-view> 
</div>

main.js 同樣通過重定向來顯示父路由

import Vue from 'vue' 
import VueRouter from 'vue-router' 
Vue.use(VueRouter) 
 
//引入兩個(gè)組件 
import home from "./home.vue" 
import game from "./game.vue" 
//定義路由 
const routes = [ 
  { path: "/", redirect: "/home" },//重定向 
  { 
    path: "/home", component: home, 
    children: [ 
      { path: "/home/game", component: game } 
    ] 
  } 
] 
//創(chuàng)建路由實(shí)例 
const router = new VueRouter({routes}) 
 
new Vue({ 
  el: '#app', 
  data: { 
    id:123, 
  }, 
  methods: { 
 
  }, 
  router 
})

home.vue 通過query來傳遞num參數(shù)為1，相當(dāng)與在 url 地址后面拼接參數(shù)

<template> 
  <div> 
    <h3>首頁</h3> 
    <router-link :to="{ path:'/home/game', query: { num: 1} }"> 
      <button>顯示<tton> 
    </router-link> 
 
    <router-view></router-view> 
  </div> 
</template>

game.vue 子路由中通過 this.$route.query.num 來顯示傳遞過來的參數(shù)

<template> 
  <h3>王者榮耀{{ this.$route.query.num }}</h3> 
</template>

運(yùn)行后的結(jié)果，傳遞的參數(shù)在地址欄中有顯示

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
query

相關(guān)文章

vue?elementUi中的tabs標(biāo)簽頁使用教程
Tabs 組件提供了選項(xiàng)卡功能,默認(rèn)選中第一個(gè)標(biāo)簽頁,下面這篇文章主要給大家介紹了關(guān)于vue?elementUi中的tabs標(biāo)簽頁使用的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
在Vue中進(jìn)行性能優(yōu)化的幾種常用方法
隨著前端技術(shù)的飛速發(fā)展,Vue.js作為一個(gè)流行的JavaScript框架,已經(jīng)被廣泛應(yīng)用于構(gòu)建現(xiàn)代Web應(yīng)用,然而,隨著應(yīng)用的復(fù)雜性和規(guī)模的增加,性能優(yōu)化也成為開發(fā)者必須面對(duì)的重要任務(wù),在本篇博客中,我們將探討幾種常用的Vue性能優(yōu)化方法,需要的朋友可以參考下
2024-12-12
在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問題匯總(推薦)
dhtmlxGantt一個(gè)功能豐富的甘特圖插件，支持任務(wù)編輯，資源分配和多種視圖模式，這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問題匯總,需要的朋友可以參考下
2023-03-03
Vue計(jì)算屬性的使用
本篇文章主要介紹了Vue計(jì)算屬性的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
Vue?Router嵌套路由(children)的用法小結(jié)
嵌套路由就是父路由里面嵌套他的子路由，父路由有自己的路由導(dǎo)航和路由容器（router-link、router-view），通過配置children可實(shí)現(xiàn)多層嵌套，這篇文章主要介紹了Vue--Router--嵌套路由(children)的用法,需要的朋友可以參考下
2022-08-08
uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果
這篇文章主要介紹了uni-app制作小程序?qū)崿F(xiàn)左右菜單聯(lián)動(dòng)效果,實(shí)現(xiàn)步驟和思路都很簡(jiǎn)單，今天通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-11-11
Vue全局自適應(yīng)大小:使用postcss-pxtorem方式
本文介紹了如何在Vue項(xiàng)目中使用postcss-pxtorem插件實(shí)現(xiàn)響應(yīng)式設(shè)計(jì),postcss-pxtorem可以自動(dòng)將CSS文件中的px單位轉(zhuǎn)換為rem單位,從而實(shí)現(xiàn)更好的自適應(yīng)布局,通過配置postcss-pxtorem插件,可以在構(gòu)建時(shí)自動(dòng)完成轉(zhuǎn)換,無需手動(dòng)修改代碼
2025-01-01
vue打包相關(guān)細(xì)節(jié)整理(小結(jié))
這篇文章主要介紹了vue打包相關(guān)細(xì)節(jié)整理(小結(jié)),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
vue3組合API中setup、 ref、reactive的使用大全
本文給大家介紹vue3組合API中setup、 ref、reactive的用法，初步了解reactive的使用及具體用法，通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2021-06-06
基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗(yàn)
VuePress為每一個(gè)由它生成的頁面提供預(yù)加載的html，不僅加載速度極佳，同時(shí)對(duì)seo非常友好。這篇文章主要介紹了基于vue-ssr的靜態(tài)網(wǎng)站生成器VuePress 初體驗(yàn),需要的朋友可以參考下
2018-04-04