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. Vue的href动态拼接绑定

    <div id="appp"> <table> <tr v-for="item in sites"> <td> ...

  2. 章节七、2-Linked List

    package introduction9; import java.util.ArrayList; import java.util.LinkedList; import java.util.Lis ...

  3. windows下，下载pip安装

    windows下,下载pip安装 https://pypi.python.org/pypi/pip#downloads 找到source那个压缩文件,下载下来解压. 参考: windows下面安装Py ...

  4. Android Studio插件GsonFormat

    GsonFormat插件用于在androidStudio 根据json自动生成class的字段和方法,极大提高了开发效率 一.安装GsonFormat插件 二.重启Android Studio,新建一 ...

  5. AngularJS学习之旅—AngularJS 简介(一)

    一.AngularJS 简介 1.AngularJS 是一个 JavaScript 框架. AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.Angu ...

  6. Ubuntu下永久修改主机名和创建用户

    使用hostname 进行修改. 创建用户,修改密码

  7. Kali 2.0 Web后门工具----WebaCoo、weevely、PHP Meterpreter

    注:以下内容仅供学习使用,其他行为均与作者无关!转载请注明出处,谢谢! 本文将介绍 Kali 2.0 版本下的三款Web后门工具:WebaCoo.weevely.PHP Meterpreter,这类工 ...

  8. 《Java大学教程》—第6章 类和对象

    6.2 对象:结构化编程-->数据-->封装(聚合,信息隐藏)-->对象(方法及其操作的数据都聚合在一个单元中,作为更高层的组织单元)-->类(创建对象的模板)6.3 类:*  ...

  9. 《生命》第三集：Mammals （哺乳动物）

    南极零下四十度的情况下,威德尔海豹能深潜到冰下捕食,并且教自己的小宝宝如何下水,看了这个才知道,海豹居然是哺乳动物,小海豹看着挺萌的. 长鼻鼩是一种很活跃的生物,而且会自己设计路线,建立迷宫,帮助自己 ...

  10. 【teradata】强制解锁

    使用加锁用户释放锁,也可以用其它用户使用如下语句强制解锁 Release lock (pdm_data ),Override