xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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 发布文章使用：只允许注册用户才可以访问！

---