vue路由跳转子组件_Vue路由跳转
现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。
父组件中：
methods：
方案一：
getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
方案一，需要对应路由配置如下：
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。
$route.params.id
方案二：
父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
{
path: '/describe',
name: 'Describe',
component: Describe
}
子组件中: 这样来获取参数
$route.params.id
方案三：
父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
this.$router.push({
path: '/describe',
query: {
id: id
}
})
对应路由配置：
{
path: '/describe',
name: 'Describe',
component: Describe
}
对应子组件: 这样来获取参数
$route.query.id
这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要~~~
vue路由跳转子组件_Vue路由跳转相关推荐
- vue路由跳转子组件_vue跳转到子路由子路由的组件页面无法滚动
问题描述 最近在用vue仿qq音乐,写了四个基础组件:推荐,歌手,排行,搜素. 歌手组件是获取一个歌手列表,点击歌手跳转到子路由,歌手的所有歌曲singer-detail组件,singer-detai ...
- 全局路由守卫，独享路由守卫，组件内路由守卫
路由守卫: 1.作用:对路由进行权限控制 2.分类:全局路由守卫,独享路由守卫,组件内路由守卫 3.全局路由守卫:在router=>index.js const routes =[ {path: ...
- vue路由跳转子组件_vue-router之路由钩子（组件内路由钩子必须在路由组件调用，子组件没用）...
模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型hi ...
- vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言 在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
- vue中页面跳转传值_vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样 需要操作的是路由history,需要用到 V ...
- vue点击按钮怎么跳转图片_vue页面跳转
一.在template中的常见写法: 点击跳转 二.在js中设置跳转(在方法中跳转界面并传参,两种方式:params 与 query): 有时候我们需要的是点击按钮跳出弹窗,选择判断后进行跳转,我们常 ...
- Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载 目录 异步组件 异步组件介绍 异步组件声明 高级异步组件 路由懒加载 路由懒加载介绍 路由懒加载方法 把组件按组分块 异步组件 异步组件介绍 在开发大型 ...
- vue中文翻译拼音组件_Vue组件可简化文本的翻译方式：通过内联翻译
vue中文翻译拼音组件 @ alidrus / vue-simple-inline-translation (@alidrus/vue-simple-inline-translation) A Vue ...
- vue使用ts 引入组件_vue项目中使用ts（typescript）入门教程
最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入T ...
最新文章
- private static final 修饰符
- 一文读懂JDK7,8,JD9的HashMap，HashTable，ConcurrentHashMap及他们的区别
- [经典算法] 河内塔
- caffe学习笔记18-image1000test200数据集分类与检索完整过程
- 41、java应用占用cpu过高原因分析
- Linux下的CUDA多版本管理
- 插入排序算法 ,递归实现_C程序实现递归插入排序
- Implement Trie (Prefix Tree)
- mongodb 扩展 libmongoc ssl_扩展面板
- Shiro 的 HelloWorld
- mysql是怎样工作的_MySQL系列：一句SQL，MySQL是怎么工作的？
- win7自定义html为桌面,Win7系统如何自定义个性桌面？
- 图片文字怎么合并转发_怎么把图片和文字组合发微信
- Failed to obtain JDBC Connection； nested exception is java.sql.SQLException: Access denied for user
- PS教程：如何拼图调色出高大上的作品
- ceph集群全部停机开机
- 学习java的第5天
- 02 离线安装管理ceph图形化界面calamari
- 漏洞与木马：如何保护您的网络安全
- more than one file was found with os independent path'com/unionpay/blepayservice/'