// 注意: 一定要区分 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. 【转载】ASP.NET MVC设置允许跨域访问

    默认情况下,浏览器端发送Ajax请求一般被禁止跨域访问,如A域名网站访问B域名网站的请求会被终止,在ASP.NET MVC项目中,我们可以配置相应的设置项,允许网站的接口跨域访问,主要需要设置Acce ...

  2. mongodb与spring mvc 整合

    1.pom文件添加对mongodb的倚赖 <dependency> <groupId>org.mongodb</groupId> <artifactId> ...

  3. ubuntu中subline无法使用搜狗输入法

    今天使用subline编写python程序,发现在ubuntu下无法调用搜狗输入法输入中文,结果一番搜索发现github上的sublime-text-imfix项目能修复此问题,项目地址是:https ...

  4. python面向对象学习(六)类属性、类方法、静态方法

    目录 1. 类的结构 1.1 术语 -- 实例 1.2 类是一个特殊的对象 2. 类属性和实例属性 2.1 概念和使用 2.2 属性的获取机制 3. 类方法和静态方法 3.1 类方法 3.2 静态方法 ...

  5. 用Python实现Zabbix-API 监控

    做运维的朋友应该知道,公司IDC机房经常有上架.下架.报修和报废的服务器.如果服务器数量很多的时候很容易造成监控遗漏.       大的互联网公司把监控系统和CMDB(资产管理系统|配置管理数据库系统 ...

  6. 四、HTTP控制器

    1.控制器的作用:数据和视图之间的桥梁 2.控制器创建方法: (1)手动创建 <?php namespace App\Http\Controllers; class UserController ...

  7. CSS单位【记录】

    1.长度 2.角度 3.时间 4.分辨率 5.颜色 6.函数 7.生成内容 8.图像 9.数字 1.长度 <length>:数字和单位之间没有空格,0之后的长度单位是可选的 相对长度单位 ...

  8. 解决ui-router路由监听$stateChangeStart、$stateChangeSuccess、$stateChangeError不执行的问题

    问题解答 angular1项目导入ui-router之后,使用路由监听,代码如下 angular.module('app', ['ui.router', 'ui.router.state.events ...

  9. 微信小程序心得

    首先从官方文档给的框架说起,微信小程序官方文档给出了app.js, app.json, app.wxss. 先从这三个文件说起. - app.js 这个文件是整个小程序的入口文件,开发者的逻辑代码在这 ...

  10. SAP MM 按采购订单查询付款信息的报表?

    SAP MM 按采购订单查询付款信息的报表? 上午给P3项目采购部门用户做了一个采购相关的报表的培训.培训过程中,客户的采购部门经理提出了一个问题:有没有报表能查询到各个采购订单的付款情况,显示采购订 ...