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. python 画个小猪佩奇

    不知道大家小时候有没有学习过logo语言,就是操纵一只小王八,来画各种图案.博主小学微机课就学习了这个,最近发现python的turtle包就是logo语言,所以画个小猪佩奇和大家分享. 代码来自知乎 ...

  2. Python random模块方法

    random内置模块中的方法注解 random.seed(a=None, version=2) # 初始化伪随机数生成器,若种子a相同,则可以使生成的随机数相同.如果未提供a或者a=None,则使用系 ...

  3. turnserver 配置说明记录

    coTurn工程提供了较完整的STUN和TURN服务,记录其主要的命令行参数配置说明 针对TURN/STUN服务进程turnserver.exe的使用参数做简单说明 -L 监听的IP地址 -p 监听端 ...

  4. MapReduce ----倒排索引

    分别建立三个文件: file1txt file2.txt file3.txt 文件内容分别是: MapReduce is simple 和 MapReduce is powerful is simpl ...

  5. C#-类（九）

    类的定义 类是描述具有相同特征与行为的事物的抽象,类内部包含类的特征和类的行为 类支持继承 类的定义是关键字class为标志 类的格式 访问标识符 class 类名 { 类主体 } 访问标识符:指定了 ...

  6. ASP.NET MVC概述及第一个MVC程序

    一.ASP.NET 概述        1. .NET Framework 与 ASP.NET                .NET Framework包含两个重要组件:.NET Framework ...

  7. Windows Server 2016-域站点链接及复制时间调整

    本章简单为大家介绍如何新建域链接并调整复制计划.生产环境中很多情况下需要我们手工去创建站点复制链接,并根据实际带宽情况调整复制计划以减轻网络压力等.站点内部署多台域控制器,域控制器间的 复制链接建议通 ...

  8. 6. svg学习笔记-路径

    路径相比于多边形<polygon>元素具有更强绘图能力,<polygon>元素可以绘制任意的多边形,而路径可以绘制任意的轮廓线,是线段,曲线,圆弧的组合形式.svg中可以使用& ...

  9. 自定义Chrome浏览器

    一.全局 自用备份,窗体透明化.要添加对应网站的窗体class到对应的位置 /*主页背景*/ /*https://images.cnblogs.com/cnblogs_com/AardWolf/135 ...

  10. JDBC复习2

    前面复习了一些基础知识以及如何抽取一些常用的代码,接下来就结合junit4做一个增删改查的小demo 重点是这么几个步骤:1.创建连接 2.编写sql语句 3.编写sql语句的载体 4.如果是Prep ...