vue & arrow function error


<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<!-- <el-button
type="primary"
@click="goTo(`./test-one`)">
goto backToTop page
</el-button> -->
<el-button
type="primary"
@click="goTo(`/test-one`)">
goto backToTop page
</el-button>
<el-button
type="primary"
@click="goTo(`/test-two`)">
goto backTop page
</el-button>
</div>
</template> <script>
// @ is an alias to /src
// import Tes from '@/components/Test.vue' export default {
name: "Home",
components: {
// Test,
},
methods: {
// goTo: (path = ``) => {
// console.log(`path =`, path, this);//
// // path = /test-one undefined
// // [Vue warn]: Error in v-on handler: "TypeError: Cannot read property '$router' of undefined"
// this.$router.push(path);
// },
// goTo: function(path = ``) {
// console.log(`path =`, path, this);//
// this.$router.push(path);
// },
goTo(path = ``) {
console.log(`path =`, path, this);//
this.$router.push(path);
},
}
};
</script>

vue router

router-link === a link

router-view === components placeholder


<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<!-- 挂载点 -->
<router-view />
</div>
</template>

refs



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


vue & arrow function error的更多相关文章

  1. vue & lifecycle methods & this bug & ES6 Arrow function & this bind bug

    vue & lifecycle methods & this bug ES6 Arrow function & this bind bug bad fetchTableData ...

  2. vue watch & arrow function bug

    vue watch & arrow function bug watch: { GeoJSON: function(newValue, oldValue) { log(`\n\n\nGeoJS ...

  3. ES6 new syntax of Arrow Function

    Arrow Function.md Arrow Functions The basic syntax of an arrow function is as follows var fn = data ...

  4. 箭头函数 this arrow function 无this

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions import w ...

  5. ES Next & Arrow function & Promise & Iterator & Generator yield & Async Await

    ES Next & Arrow function & Promise & Iterator & Generator yield & Async Await co ...

  6. 廖雪峰js教程笔记5 Arrow Function(箭头函数)

    为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数 阅读: ...

  7. JavaScript学习笔记(十二)——箭头函数(Arrow Function)

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  8. arrow function and bind

    Can you bind arrow functions? https://stackoverflow.com/questions/33308121/can-you-bind-arrow-functi ...

  9. arrow function

    简介 JavaScript 中,函数可以用箭头语法(”=>”)定义,有时候也叫“lambda表达式”.这种语法主要意图是定义轻量级的内联回调函数.例如: // Arrow function: [ ...

随机推荐

  1. Cisco发现协议

    CDP Cisco Discovery Protocol: 思科发现协议 是一个提供关于直接相连的交换机.路由器和其它Cisco设备的综合信息的专有工具 CDP 能够发现直接相邻的设备而不管这些设备所 ...

  2. history附上时间戳,history命令_Linux history命令:查看和执行历史命令

    起因是这样的,一台机器客户反馈连接不上,说没有任何操作.好吧,排查吧. 1.第一步先看网络是否通: 从图中可以看到一开始是一直不通的.然后就通了,问了客户有没操作重启什么的结果说没有任何操作,还让给个 ...

  3. 0到1:微信后台系统的演进之路 原创 张文瑞 InfoQ 2016-01-14

    0到1:微信后台系统的演进之路 原创 张文瑞 InfoQ 2016-01-14

  4. 多线程c++11编程题目

    /*题目:子线程循环 10 次,接着主线程循环 100 次,接着又回到子线程循环 10 次,接着再回到主线程又循环 100 次. 如此循环50次,试写出代码.子线程与主线程必有一个满足条件(flag ...

  5. 【PC Basic】CPU、核、多线程的那些事儿

    一.CPU与核的概念 1.半导体中名词[Wafer][Chip][Die]中文名字和用途 Wafer--晶圆 wafer 即为图片所示的晶圆,由纯硅(Si)构成.一般分为6英寸.8英寸.12英寸规格不 ...

  6. 结合python版本安装python-devel gcc和g++的区别 安装前做yum搜索

    [test@ecs autocloudservices]# yum install python-develLoaded plugins: fastestmirrorLoading mirror sp ...

  7. Python基础(列表中变量与内存关系)

    在Python中,copy的是内存地址,引用的是列表的引用地址,列表里存的是各个元素的地址 例如: name = [1,2,3,4,['xfxing','summer',6]] n2 = name.c ...

  8. Java中get()和set()作用

    一.前言 在程序的设计中,我们普遍的定义一个private变量,然后为这个变量加上get() .set()方法,那为何不直接定义一个public变量呢? 很多人是这样回答的: 1.关系到安全性的问题, ...

  9. loj10170

    在 n×n 的棋盘上放 k 个国王,国王可攻击相邻的 8 个格子,求使它们无法互相攻击的方案总数. -------------------------------------------------- ...

  10. Node.js躬行记(6)——自制短链系统

    短链顾名思义是一种很短的地址,应用广泛,例如页面中有一张二维码图片,包含的是一个原始地址(如下所示),如果二维码中的链接需要修改,那么就得发代码替换掉. 原始地址:https://github.com ...