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. 你不可不知的Java引用类型之——虚引用

    定义 虚引用是使用PhantomReference创建的引用,虚引用也称为幽灵引用或者幻影引用,是所有引用类型中最弱的一个.一个对象是否有虚引用的存在,完全不会对其生命周期构成影响,也无法通过虚引用获 ...

  2. 读JP摩根的《加密货币展望》阅读笔记

    加密货币不可能死掉, 非常容易以各种形式生存下去早期加密货币的半数以上交易额是地下钱庄交易. 现在已经被投资和投机交易取代.加密货币不可能取代政府发行的货币,其影响到了美元人民币的主权利益加密货币面临 ...

  3. Scrapy 为每一个Spider设置自己的Pipeline

    settings中的ITEM_PIPELINES 通常我们需要把数据存在数据库中,一般通过scrapy的pipelines管道机制来实现.做法是,先在pipelines.py模块中编写Pipeline ...

  4. JS的判断字符/元素是否存在数组列表

    python有in操作, 可以很方便的用于判断元素是否存在指定列表. JS的in操作是对象, 用于判断指定的属性在指定对象中是否存在. propNameOrNumber in objectName i ...

  5. 穷举，迭代，while循环

    1. 2.大马驼2石粮食,中等马驼1石粮食,两头小马驼1石粮食,要用100匹马,驼100石粮食,该如何分配? 3. 4. 5. 6.

  6. mysql文件

    MySQL的每个数据库都对应存放在一个与数据库同名的文件夹中,MySQL数据库文件包括MySQL(server)所建数据库文件和MySQL(server)所用存储引擎创建的数据库文件. .frm文件: ...

  7. 制作U盘启动-----计算机经验

    这期呢我就先不打算写关于C的文章,这次就先给大家写几篇关于电脑系统安装的计算机经验篇.希望各位接下来看了我几期的经验文章,你们也能在电脑系统报销之时能够让其满血复活. 制作U盘启动 下载制作U盘启动的 ...

  8. 如何设置可以避免php代码中的中文在浏览器中成为乱码？

    其实很简单,只需要在代码开始的前面加上一条这样的语句就行: //这里面我的浏览器中的字符编码格式为utf-8,所以这里我设置为utf-8,如果你的浏览器中的默认编码不是这个,请选择浏览器默认的编码格式 ...

  9. shell编程/字库裁剪(1)——想法

    版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/7679024.html 作者:窗户 Q ...

  10. Angular四大核心特性

    Angular四大核心特性 Angular四大核心特性理论概述 MVC模式:它目的是为了分离视图.模型和控制器而设计出来的:其中数据模型用来储存数据,视图用来向用户展示应用程序,控制器充当模型和视图之 ...