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 消息异步处理之AsyncTask

    Android提供了异步处理消息的方式大致有两种,第一种是handler+Thread,之前已经对于这种方式做过分析,第二种就是AsyncTask,这是Android1.5提供的一种轻量级的工具类,其 ...

  2. Testlink1.9.17使用方法(第十二章 总结)

    第十二章 总结 QQ交流群:585499566 TestLink用于进行测试过程中的管理,通过使用TestLink提供的功能,我们可以将测试过程从:测试需求.测试设计.到测试执行.完整的管理起来,同时 ...

  3. 2017.9.16~17,热烈庆祝共创力罗老师《敏捷MINI体验式实战培训》在某大型企业成功举办！

    2017.9.16~17日,深圳市共创力企业管理咨询有限公司为某上市企业提供了为期两天的内训服务.该次内训的主题为<敏捷MINI体验式实践培训>,为期两天.此次培训由共创力资深讲师Geor ...

  4. Scrapy 解决Scrapy安装时报错"Microsoft Visual C++ 14.0 is required"

    问题描述 当前环境win10,python_3.6.1,64位.在windows下,在dos中运行pip install Scrapy报错:error: Microsoft Visual C++ 14 ...

  5. 【PSR规范专题(6)】PSR-7 HTTP消息接口【转】

    PSR-5 和 PSR-6 投票未通过所以直接跳到PSR-7了 本文档描述了在RFC 7230和RFC 7231中被描述来代表HTTP消息通用接口,以及在RFC 3986中规定的URIs语法. HTT ...

  6. [20181031]12c 在线移动数据文件.txt

    [20181031]12c 在线移动数据文件.txt --//12c以前,移动或者改名数据文件是一项比较麻烦的事情,至少要停一下业务.而12c支持在线移动或者改名数据文件,并且有点不可思议--//的是 ...

  7. Linux atop 监控系统状态

    atop是一个功能非常强大的linux服务器监控工具,它的数据采集主要包括:CPU.内存.磁盘.网络.进程等,并且内容非常的详细,特别是当那一部分存在压力它会以特殊的颜色进行展示,如果颜色是红色那么说 ...

  8. Dos环境变量修改

    批处理修改环境变量,修改用户变量.系统变量(全局变量),永久/临时设置环境变量.设置Java环境变量 临时环境变量 修改变量: set PATH=%Path%;%JAVA_HOME%\bin 含义:表 ...

  9. 操作系统常用调度算法（转载https://www.cnblogs.com/kxdblog/p/4798401.html）

    操作系统常用调度算法   在操作系统中存在多种调度算法,其中有的调度算法适用于作业调度,有的调度算法适用于进程调度,有的调度算法两者都适用.下面介绍几种常用的调度算法. 先来先服务(FCFS)调度算法 ...

  10. Cesium实现文字、点、多段线、多边形的实时绘制

    背景知识 点.线.面以及文字的实时绘制是GIS很重要的一个功能,是用户对感兴趣区域标注的业务需要.同时Cesium提供了点.线(多段线).面及文字(label)绘制的接口,绘制方式总共有两种,一种是通 ...