vue项目中使用到了组件间传值，通过路由跳转实现从产品页进入产品详情页查看功能。

使用了this.$router.push（编程式导航）

product页面中：因为只需要遮住产品列表页来显示产品详情页，所以添加了router-view

点击列表后，传递产品id，作为params的内容。

productDetail页中：首先获取传递过来的id，然后就可以进行后续逻辑操作（数据请求）了。

返回操作：

上述方法只是本人实现功能使用的，还有其他实现方法。更多使用方法，建议查看vue官网：https://router.vuejs.org/zh/guide/essentials/navigation.html#routerpushlocation

vue编程式导航的更多相关文章

  1. vue编程式导航，命名路由

    //使用 window.location.href 的形式,叫做 编程式导航 绑定事件的形式 <template> <div class="goods-item" ...

  2. Vue 编程式导航，路由history模式

    import Vue from 'vue' import App from './App.vue' import Home from './components/Home.vue' import Ne ...

  3. Vue 编程式导航（通过js跳转页面）以及路由hash模式和history模式

    第一种方法: this.$router.push({path:'shopcontent?aid=3'}   第二种方法   this.$router.push({name:'news'}} 通过在ma ...

  4. vue 编程式导航

    // 命名的路由(这里的name为路由中定义的name名称) this.$router.push({ name: 'user', params: { userId: '123' }}) // 带查询参 ...

  5. VueRouter爬坑第四篇-命名路由、编程式导航

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

  6. [Vue 牛刀小试]：第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  7. [vue]声明式导航和编程式导航

    声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切换 区别: 写法不一样,声明式导航是写在组件的template中,通过router-link来触发,编程式导航写在js函数中, ...

  8. Vue 路由的编程式导航与history模式

    编程式导航 注意:官方文档写错了 通过javascript跳转 //第一种跳转方式 // this.$router.push({ path: 'news' }) // this.$router.pus ...

  9. vue中声明式导航和编程式导航

    官方文档:https://router.vuejs.org/zh-cn/essentials/navigation.html 声明式导航和编程式导航 共同点: 都能进行导航,都可以触发路由,实现组件切 ...

随机推荐

  1. Android项目实战（三十三）：AS下获取获取依赖三方的jar文件、aar 转 jar

    使用 Android studio 开发项目中,有几种引用三方代码的方式:jar 包 ,类库 ,gradle.build 的compile依赖. 大家会发现github上不少的项目只提供compile ...

  2. JSON基础知识点

    一.介绍: JSON是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成. 二.数据格式: 1.JSON建构于两种数据格式: “名称/值”对(键值对)的集合,不同的语言中,它被理解为 ...

  3. 扫码下单使用FAQ

    1.适用情景:扫码点餐支付宝支付报错 解决方案:1.检查主账号上口碑授权是否失效.(重新授权) 2.检查主账号上的PID是否绑定.(绑定PID) 注意:1.支付宝扫码进行的扫码下单支持直连支付宝和蚂蚁 ...

  4. vs2017 代码格式化 文档排版 编辑 设置文档的格式

    vs

  5. web前端（7）—— 了解CSS样式，引入css样式的方式

    CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打 ...

  6. 爬取mzi.com妹子图片网站（requests库）

    看了崔大佬的文章,写了这个爬虫,学习了!原文地址 现在该网站加了反爬机制,不过在headers里加上refere参数就行了. 以下代码仅做学习记录之用: from bs4 import Beautif ...

  7. js中图片上传,多次上传同一张不生效

    在做图片上传的功能时, 使用删除功能删除了一张图片, 然后想重新上传原来删除的图片, 结果预览不显示, 也不能上传成功 解决办法, 在删除方法里置空input $("#id").f ...

  8. CISCO 过载NAT配置（小型网络)

    一.实验涉及技术  vlan(虚拟局域网). svi(三层交换) .nat(网络地址转换).static router(静态路由) 三.实验目的: 通过配置过载NAT从而实现企业内网正常访问公网,PC ...

  9. Java操作Excel（使用JXL）

    一.本地操作 1.读取 package com.ljf.mb; import java.io.FileInputStream; import java.io.InputStream; import j ...

  10. 【Java多线程通信】syncrhoized下wait()/notify()与ReentrantLock下condition的用法比较

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6556925.html  一:syncrhoized使用同一把锁的多个线程用通信实现执行顺序的调度 我们知道,使 ...