// 注意: 一定要区分 this.$route 和 this.$router 这两个对象,
// 其中: this.$route 是路由【参数对象】,所有路由中的参数, params, query 都属于它
// 其中: this.$router 是一个路由【导航对象】,用它 可以方便的 使用 JS 代码,实现路由的 前进、后退、 跳转到新的 URL 地址 console.log(this);
// 1. 最简单的
// this.$router.push("/home/goodsinfo/" + id);
// 2. 传递对象
// this.$router.push({ path: "/home/goodsinfo/" + id });
// 3. 传递命名的路由
this.$router.push({ name: "goodsinfo", params: { id } });
{ path: '/home/goodsinfo/:id', component: GoodsInfo, name: 'goodsinfo' },

vue使用JS的形式进行路由导航的更多相关文章

  1. vue.js编程式路由导航 --- 由浅入深

    编程式路由导航 实例中定义一个方法,这个方法绑定在标签上 然后就设置路由跳转 语法 this.$router.history.push('要跳转路由的地址') <!DOCTYPE html> ...

  2. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

  3. 【VUE】5.路由导航守卫

    1. 功能需求 1. 当用户登陆成功后,把得到的token存到Session Storage 2. components -> Form.vue , 对预验证进行校验,如果验证不正确就跳出,如果 ...

  4. vue之路由导航守卫-全局前置守卫

    一.使用方式 全局前置守卫用于在路由配置生效之前进行一些动作,可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... ...

  5. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  6. 【vue】iView-admin2.0动态菜单路由

    vue项目实现动态路由有俩种方式 一.前端在routers中写好--所有--路由表 <前端控制路由>,登录时根据用户的角色权限来动态的显示菜单路由 二.前端通过调用接口请求拿到当前用户-- ...

  7. vue组件、自定义指令、路由

    1.vue组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  8. 【vue】iView-admin2.0动态菜单路由【版2】

    依照iView-admin2.0动态菜单路由[版1] 归纳几个节点动态路由获取方式2 ——> easymock假数据 ——> 数据转组件处理.addRoutes ——> localS ...

  9. Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

    1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...

随机推荐

  1. Flask-Mail

    WOW! 我的大号QQ收到了小号QQ的邮件! 小玩Flask-Mail 先到小号邮箱开启服务并获取获取授权码  https://jingyan.baidu.com/article/b0b63dbf1b ...

  2. IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS

    IIS 里 安装好 SSL 证书后,如何实现 在浏览器里录入 http://www.xxx.com,会自动跳转到 https://www.xxx.com 呢. 首先,下载并安装 IIS 扩展: URL ...

  3. [android] 代码注册广播接收者&利用广播调用服务的方法

    利用广播调用服务里面的方法,间接的方式调用服务内部的方法,与现实中差不多,请媒体曝光 主界面里面 在界面创建的时候开启一下服务普通的startService()方法 发送一条广播出去 获取Intent ...

  4. redis实现高并发下的抢购/秒杀功能

    之前写过一篇文章,高并发的解决思路(点此进入查看),今天再次抽空整理下实际场景中的具体代码逻辑实现吧:抢购/秒杀是如今很常见的一个应用场景,那么高并发竞争下如何解决超抢(或超卖库存不足为负数的问题)呢 ...

  5. mysql基础整理01

    在终端或命令行中和数据库软件建立连接 mysql -uroot -p 数据库相关SQL 查看所有数据库 show databases; 创建数据库 create database 数据库名; crea ...

  6. Go实现基于WebSocket的弹幕服务

    拉模式和推模式 拉模式 1.数据更新频率低,则大多数请求是无效的 2.在线用户量多,则服务端的查询负载高 3.定时轮询拉取,实时性低 推模式 1.仅在数据更新时才需要推送 2.需要维护大量的在线长连接 ...

  7. mysql日期时间函数

    日期时间函数1.取得当前日期时间SELECT NOW(), SYSDATE(),CURRENT_TIMESTAMP() FROM DUAL2.取得当前日期SELECT CURDATE(),CURREN ...

  8. 关于RecyclerView你知道的不知道的都在这了(下)

    目录 目录 正文 6. Recycler 7. ItemAnimator 8. ItemDecoration 9. OnFlingListener 目录 由于本篇篇幅特长,特意做了个目录,让大伙对本篇 ...

  9. vue2 切换路由时 页面滚动到顶部 用游览器返回时 记住上页的位置

    官方用例:https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html import Vue from 'vue' import Route ...

  10. bootstrap timepicker 在angular中取值赋值 并转化为时间戳

    上一篇我们讲到angular对于timepicker的一个封装后的插件angular-bootstrap-timepicker,但是由于angular的版本必须是v1.2.30以上的.对于有些涉及到多 ...