Vue之嵌套router传参params与query

xiaoxiao2021-02-28  8

vue嵌套路由中父组件向子组件传递路由可以通过传参的方式,传参有params与query两种方式。

一、params传参会在地址栏隐藏参数,与ajax的post请求极为相似,用法上不能用path来定义路径,要通过name来定义,用法如下:

router.js代码:

import Vue from 'vue' import Router from 'vue-router' import trade from '@/components/pages/trade' Vue.use(Router) export default new Router({ routes: [ { path: '/trade', name: 'trade1', component: trade } ] })

App组件代码:

<template> <div id="app"> <router-link :to="{name:'trade1',params:{name:'user'}}">跳转按钮</router-link> <router-view></router-view> </div> </template>

trade组件,打印出传递的参数:

<template> <div> <span>{{this.$route.params.name}}</span> </div> </template>

二、query传参还是用path定义路径,地址栏显示参数不太安全,类似ajax的get请求

使用上只需要把上面的params改成query,name改成path即可

转载请注明原文地址: https://www.6miu.com/read-1250276.html

最新回复(0)