手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元

  • route-link是在html中静态定义的，也可以在代码中动态跳转：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>abc</title>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>

<body>

    <div id="app">

        <h1>Hello App!</h1>

        <!-- 路由出口 -->

        <!-- 路由匹配到的组件将渲染在这里 -->

        <router-view>

        </router-view>

    </div>

</body>

<script type="text/javascript">

// 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。

// 可以从其他文件 import 进来

// const Foo = { template: '<div @onclick="pushtest" href="">Go to Bar</a>' }

// const Bar = { template: '<div @onclick="pushtest" href="">Go to Foo</a>' }

const Foo = Vue.extend({

    template: '<a @click="pushtest" href="javascript:void(0)">Navigate to bar</a>',

    methods: {

        pushtest() {

            //alert("bar");

            this.$router.push({ name: 'bar' });

            //alert("fdas");

        },

    },

});

const Bar = Vue.extend({

    template: '<a @click="pushtest" href="javascript:void(0)">Navigate to foo</a>',

    methods: {

        pushtest() {

            //alert("foo");

            this.$router.push({ name: 'foo' });

            //alert("fdas");

        },

    },

});

// 2. 定义路由

// 每个路由应该映射一个组件。 其中"component" 可以是

// 通过 Vue.extend() 创建的组件构造器，

// 或者，只是一个组件配置对象。

// 我们晚点再讨论嵌套路由。

const routes = [

    { path: '/', redirect: "/bar" },

    { path: '/foo', name: "foo", component: Foo },

    { path: '/bar', name: "bar", component: Bar },

]

// 3. 创建 router 实例，然后传 `routes` 配置

// 你还可以传别的配置参数, 不过先这么简单着吧。

const router = new VueRouter({

    routes // （缩写）相当于 routes: routes

})

// 4. 创建和挂载根实例。

// 记得要通过 router 配置参数注入路由，

// 从而让整个应用都有路由功能

const app = new Vue({

    router, // （缩写）相当于 router: router

    //  methods: {

    //     pushtest:function() {

    //         alert("fdas");

    //     },

    // },

    watch: {

        $route(to, from) {

            //alert(to.path);

            //document.getElementById("testzy").innerText = this.$route.params.id;

        }

    },

}).$mount('#app') // 现在，应用已经启动了！

</script>

</html>

注意绝对不能写href="",这样执行click跳转后，又会执行href跳转到当前页面

push也可以直接使用path:

this.$router.push('/foo');
  • push会向history添加一条新记录，此时后退会跳转到前一个组件

router.replace(location)跟push功能类似，但是不会向history添加一条新记录，不能后退

router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

 
// 在浏览器记录中前进一步，等同于 history.forward()

router.go(1)

// 后退一步记录，等同于 history.back()

router.go(-1)

// 前进 3 步记录

router.go(3)

// 如果 history 记录不够用，那就默默地失败呗

router.go(-100)

router.go(100)

vue路由--使用router.push进行路由跳转的更多相关文章

  1. vue 使用a+ router.push的形式跳转时，地址栏不显示参数

    解决办法: a链接不要写href 属性

  2. vue中this.$router.push()路由传值和获取的两种常见方法

    1.路由传值   this.$router.push() (1) 路由跳转使用router.push()方法,这个方法会向history栈添加一个新纪录,所以,当用户点击浏览器后退按钮时,会回到之前的 ...

  3. vue 之this.$router.push、replace、go的区别

    一.this.$router.push 说明:跳转到指定URL,向history栈添加一个新的记录,点击后退会返回至上一个页面 使用: this.$router.push('/index') this ...

  4. vue 中 this.$router.push() 路由跳转传参 及 参数接收的方法

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用name ...

  5. Vue中this.$router.push参数获取（通过路由传参）【路由跳转的方法】

    传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效.需要用nam ...

  6. router.push query 路由 跳转 传参使用

    this.$router.push({path:'/shop',query:{ goods_name:goods_name, goods_price:goods_price, uid:goods_pr ...

  7. Vue中this.$router.push（参数） 实现页面跳转

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...

  8. Vue中this.$router.push参数获取

    传递参数的方法:1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来 ...

  9. vue中this.$router.push() 传参

    1  params 传参 注意⚠️:patams传参 ,路径不能使用path 只能使用name,不然获取不到传的数据 this.$router.push({name: 'dispatch', para ...

随机推荐

  1. mysql高级复习

    MySQL官方对索引的定义为:索引(Index)是帮助MySQL高效获取数据的数据结构.可以得到索引的本质:索引是数据结构,可以简单理解为“排好序的快速查找数据结构”. 数据本身之外,数据库还维护着一 ...

  2. kubernetes concepts -- Replication Controller

    Edit This Page ReplicationController NOTE: A Deployment that configures a ReplicaSet is now the reco ...

  3. cocoa pods最新安装说明和使用方法

    最新版 CocoaPods 的安装流程 1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 2.使用新的源 $gem sources - ...

  4. python property()函数：定义属性

    正常情况下,类包含的属性应该是隐藏的,只允许通过类提供的方法来间接的实现对类属性的访问和操作. class Person: #构造函数 def __init__(self, name): self.n ...

  5. 「 从0到1学习微服务SpringCloud 」11 补充篇 RabbitMq实现延迟消费和延迟重试

    Mq的使用中,延迟队列是很多业务都需要用到的,最近我也是刚在项目中用到,就在跟大家讲讲吧. 何为延迟队列? 延迟队列就是进入该队列的消息会被延迟消费的队列.而一般的队列,消息一旦入队了之后就会被消费者 ...

  6. Stream排序Map集合

    最近小编自己一个人在负责一个项目的后台开发,其中有一部分是统计相关的功能,所以需要一些排序或者分组的操作,之前这种操作小编觉得还是比较麻烦的,虽热有一些现成的工具类,但是工具类的写法也是比较复杂的,但 ...

  7. 深入理解Java虚拟机：JVM高级特性与最佳实践

    第一部分走近Java第1章走近Java21.1概述21.2Java技术体系31.3Java发展史51.4Java虚拟机发展史91.4.1SunClassicExactVM91.4.2SunHotSpo ...

  8. Java小白入门：聊聊Java这门编程语言

    一.什么叫做编程 首先我们应该了解一下什么叫做编程. 百度百科词条的解释: 编程是编定程序的简称,是让计算机代我们解决某个问题,是对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终 ...

  9. 痞子衡嵌入式：嵌入式里堆栈原理及其纯C实现

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是嵌入式里堆栈原理及其纯C实现. 今天给大家分享的这篇还是2016年之前痞子衡写的技术文档,花了点时间重新编排了一下格式.栈这种结构在嵌入式 ...

  10. Ubuntu安装openjdk8

    sudo apt-get update sudo apt-get install openjdk-8-jdk 通过 which java 找到java安装路径 添加环境变量 sudo vim ~/.b ...