router中路由配置

params第一种传参路由配置

 {path: '/homeDetails/:id',//要传递的参数前面加：component: () =>import ('@/views/home/homeDetails.vue')},

params第二种（name传参）或 query方式的路由配置

 {path: '/homeDetails',name:'homeDetails'component: () =>import ('@/views/home/homeDetails.vue')},

组件home点击传参

// 例如表格中点击表名称跳转新页面需要把id传到新页面使用
<template><el-table :data="tableDatas"><el-table-column label="产品名称"><template slot-scope="scope" @click="handleClick(scope.row.id)">{{ scope.row.name}}</template></el-table-column>...</el-table></template><script>export default{data(){tableDatas:[];//表格数据},methods:{handleClick(id){console.log(id) //121345this.$router.push({path:`/homeDetails/${id}`}) //params方式传参第一种方式this.$router.push({name:'homeDetails',params:{id:id}}) //params方式传参第二种方式// 或this.$router.push({path:`/homeDetails`, query:{id:id}}) // query方式传参}}}
</script>

组件homeDetails接受参数

// 子组件使用this.$route.params.id来接收路由参数
<template><div><span>这就是我需要的id：</span>{{$route.params.id || $route.query.id}}</div>//或<div><span>这也是我需要的id：</span>{{id}}</div>
</template>
<script>export default{data(){id:''},mounted(){this.id = this.$route.params.id  //121345  params传参方式接收//或this.id = this.$route.query.id  //121345  query传参方式接收}}
</script>

vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）相关推荐

Vue声明式路由导航和编程式路由导航的优缺点及实现方法
文章目录前言路由实现 1.目标 2.前置条件 <1>安装vue-router插件 <2>写个用于转跳的组件页 <3>写路由文件 <4>写路由锚点 3 ...
Vue 编程式路由导航
文章目录 router- link的replace属性编程式路由导航缓存路由组件两个新的生命钩子 router- link的replace属性 1.作用:控制路由跳转时操作浏览器历史记录的模式 ...
Vue -- 编程式路由导航
文章目录 1. 声明式导航 & 编程式导航 1.1 声明式导航 1.2 编程式导航 2. vue-router 中的编程式导航 API 2.1 常用的编程式导航 API 2.2 \$route ...
编程式路由导航连续跳转出现NavigationDuplicated报错的问题
1.错误示例如在多次点击搜索按钮进行编程式路由跳转时控制台会出现报错NavigationDuplicated 2.分析错误产生原因原因是在vue-router3.1.0之后, 引入了promise ...
编程式路由导航和withRouter
编程式路由导航如果想使用按钮实现路由跳转,有两种形式,可回退和不可回退两种: 由于history被放在props中,可以直接通过this.props.history的push和replace改变可 ...
Day31_编程式路由导航
提出需求 1.观察this.$router 上有什么 (push replace) 2.实现this$router.push查看 1>在message组件里面: 3.实现this$rou ...
vue编程式导航跳转到当前路由多次执行抛出NavigationDuplicated: Avoided redundant navigation to current location:
为什么? push方法会返回一个Promise对象,内部会进行跳转成功或失败的回调解决方法只需在push方法末尾传递两个成功和失败的回调函数,可以捕获到当前的错误,可以解决.但是此种方法治标不治本 ...
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue-router 了解 vue插件库,用来实现SPA应用(单页面) 整个页面只有一个完整的页面点击页面中导航链接,不会刷新页面,只做局部更新数据通过ajax请求路由的理解一组映射关系(ke ...
vue中使用axios发送请求（二）
新建一个server文件夹,文件为MyHttp.js import axios from 'axios'; let MyHttp = {}; MyHttp.install = function (vu ...

vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）

this.$router.push进行编程式路由跳转传参

router中路由配置

组件home点击传参

组件homeDetails接受参数

vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）相关推荐

最新文章

热门文章