手机赚钱怎么赚,给大家推荐一个手机赚钱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. spring boot 集成apollo 快速指南

    目前市面上流行的三大配置中心框架:Spring CLoud Config .Alibaba Nacos 以及携程apollo, 我们相应架构组号召,就使用Apollo吧. Work Flow 简单解释 ...

  2. git branch stash

    一.branch(分支) 1.创建分支 git branch dev 2.切换分支 git branch dev 3.合并分支 git merge bug 4.查看分支 git branch 5.删除 ...

  3. Java的String类常用方法

    一.构造函数 String(byte[ ] bytes):通过byte数组构造字符串对象. String(char[ ] value):通过char数组构造字符串对象. String(Sting or ...

  4. flutter 与 android 混合开发

    现有的混合开发方式,都是存flutter项目在android系统或者iOS上面跑. 但是,实际情况是,我们需要在一个成熟的native项目上面,跑几个flutter页面,逐步的进行flutter的融合 ...

  5. selenium + PhantomJS使用时 PhantomJS报错解决

    selenium + PhantomJS使用时 PhantomJS报错解决 在做动态网页爬虫时用到了selenium + PhantomJS,安装好之后运行时报错: UserWarning: Sele ...

  6. springboot开发之配置自定义的错误界面和错误信息

    如何定制错误页面? (1)在有模板引擎的情况下:在template文件夹下的error/状态码:即将错误页面命名为:错误状态码.html放在template文件夹里面的error文件夹下,发生此状态码 ...

  7. 在 Ubuntu 上安装 K8S教程

    在 Ubuntu 上安装 K8S教程 1,更新系统源 如果系统本身自带得镜像地址,服务器在国外,下载速度会很慢,可以打开 /etc/apt/sources.lis 替换为国内得镜像源. apt upg ...

  8. maven远程部署到tomcat8服务器

    maven远程部署到tomcat8服务器 环境准备 linux服务器一台 服务器安装JDK 服务器安装Tomcat 服务器Tomcat8配置 添加Tomcat权限 配置文件路径: tomcat/con ...

  9. springboot mybatis 多数据源配置支持切换以及一些坑

    一 添加每个数据源的config配置,单个直接默认,多个需要显示写出来 @Configuration @MapperScan(basePackages ="com.zhuzher.*.map ...

  10. 推荐一本学习Groovy的书籍Groovy程序设计!

    有朋友公司在用groovy开发,于是推荐我学习一下,搜到了这本书: 花了一个月时间读完了这本书!写的很棒,几乎没有废话,全书都是很重要的知识点和很好的讲解,确实像封面说的那样,使用的好可以提高开发效率 ...