vue路由跳转传参 Orz

好困好困好困

常用路由跳转方式

通过router-link进行跳转
通过$router.push进行跳转

router-link

<router-link :to="{path: 'yourPath', params: { name: 'name', dataObj: data},query: {name: 'name', dataObj: data}}">
</router-link>1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航2. params -> 是要传送的参数,参数可以直接key:value形式传递3. query -> 是通过 url 来传递参数的同样是key:value形式传递// 2,3两点皆可传递

$router方式跳转

// 组件 a
<template><button @click="sendParams">传递</button>
</template>
<script>export default {name: '',data () {return {msg: 'test message'}},methods: {sendParams () {this.$router.push({path: 'yourPath', name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',params: { name: 'name', dataObj: this.msg}/*query: {name: 'name', dataObj: this.msg}*/})}},computed: {},mounted () {}}
</script>
<style scoped></style>
----------------------------------------
// 组件b
<template><h3>msg</h3>
</template>
<script>export default {name: '',data () {return {msg: ''}},methods: {getParams () {// 取到路由带过来的参数 let routerParams = this.$route.params.dataobj// 将数据放在当前组件的数据内this.msg = routerParams}},watch: {// 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可'$route': 'getParams'}}
</script>
<style scoped></style>

vue路由跳转传参 Orz相关推荐

vue路由跳转传参乱码解决
vue路由组件跳转传参中文乱码解决 -在路由传参 this.$router.push({path:"/index", query:{msg:encodeURI("我是消息 ...
VUE路由跳转传参的七种方法
vue中每个页面都需要在路由中声明,就是在router/index.js中写 import Vue from 'vue' import Router from 'vue-router' import ...
vue路由跳转传参的几种方式
需求是跳转至工单申请详情页面 vue.js中路由配置代码: import Layout from '@/layout'const repairRouter = {path: '/repair',co ...
vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）
this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 router中路由配置 params第一种传参路由配置 {p ...
vue2.0 点击跳转传参--vue路由跳转传参数
vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转通过编程导航进行路由跳转 1. router-link [html] view plaincopy <r ...
vue路由传参两种方式；vue路由传参query与params区别；vue路由跳转的带参与不带参,路由跳转传参方式：name 、 path；
vue项目的路由传参常用的有两种方式:query和params 1.query传参特点:1.1可以用path也可以用name传递路径注意name是路由页面vue文件的名称不需要/1.2跳转页面地址 ...
尚硅谷VUE项目-前端项目问题总结07--产品详情页【vuex-排他操作foreach-放大镜-轮播图-兄弟组件通信$bus-购物车-路由跳转传参-路由传参+会话存储】-游客身份-节流
尚硅谷VUE项目-前端项目问题总结07---产品详情页 1.静态组件(详情页还未注册为路由组件) 2.发请求 3.vuex-获取产品详情信息 3.1放大镜 3.2 属性值[排他操作] 3.3轮播图[j ...
vue3路由配置及路由跳转传参
1.安装路由 npm i vue-router 2.编写需要展示的路由在src目录下创建pages文件夹,里面创建两个vue文件命名为student.vue,person.vue 分别编写两个vue ...
Vue 路由组件通讯传参的 8 种方式
当 props 是一个对象时,它将原样设置为组件 props.当 props 是静态的时候很有用. 我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过 ...

vue路由跳转传参 Orz

vue路由跳转传参 Orz相关推荐

最新文章

热门文章