vue3踩过的坑 - Cannot read property '$router' of undefined

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3踩过的坑 - Cannot read property '$router' of undefined相关的知识,希望对你有一定的参考价值。

参考技术A

在setup函数中使用this. router\' of undefined
原因:setup()中不能使用this
解决方法:
第一步

第二步

知识点:
1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数,因此只能访问
props
attrs
slots
emit

而不能访问
data
computed
methods

2、setup 函数中的 props 是响应式的,当传入新的 prop 时,它将被更新。但是,因为 props 是响应式的,你不能使用 ES6 解构,因为它会消除 prop 的响应性,如果需要解构 prop,可以通过使用 setup 函数中的 toRefs 来完成此操作:

另外: context 是一个普通的 JavaScript 对象,也就是说,它不是响应式的,这意味着你可以安全地对 context 使用 ES6 解构

3、 setup()内使用响应式数据时,需要通过.value获取

4、从 setup() 中返回的对象上的 property 返回并可以在模板中被访问时,它将自动展开为内部值。不需要在模板中追加 .value
5、setup函数只能是同步的不能是异步的

记vue 脚手架router-link踩过的坑

router-link在vue中用来做路由跳转,等于是封装过的a标签,也可以转换成别的标签,最近项目中遇到一个问题,app.js中导入主页home组件

 1 <div id="app">
 2       <div id="nav">
 3         <Home></Home>
 4       </div>
 5     <router-view  />
 6   </div>
 7 </template>
 8 <script>
 9 import Home from ‘./views/Home‘
10 export default {
11   components:{
12     Home
13   }
14 }

此时我在router中的index.js中引入其为“/”,然后我页面做了一个跳转,发现根本没办法点过去,rul变了,但是路由跳转不到一个新的页面,所有代码如下

<router-link to="city" replace>
    <div class="header-right">城市<i class = "iconfont icon-down-fill-xs"></i> </div>
  </router-link >             、//需要跳转的代码
import Home from ‘../views/Home.vue‘
import City from ‘../views/City.vue‘

Vue.use(VueRouter);

const routes = [
  {
    path: ‘/‘,
    name: ‘Home‘,
    component: Home,
  },
  {
    path: ‘/city‘,
    name: ‘City‘,
    component: City,

  },
]                  //路由表的引入
<template>
 <div>
  abdhdsif
 </div>
</template>
<script>
export default {
  name:"City"
}
</script>
<style lang = "less" scoped>

</style>     //跳转组件的代码

本来以为会打开一个新的页面,但是点了半天都没反应,后来才发现home组件占了所以位置,也就是上面app的代码写的有问题,删掉之后就可以了,:

<template>

  <div id="app">
      <div id="nav">
      </div>
    <router-view  />
  </div>
</template>
<script>

export default {
  components:{
  }
}
</script>
<style lang="less">

完美解决,去到不同的页面只需要改变路由就好了。

以上是关于vue3踩过的坑 - Cannot read property '$router' of undefined的主要内容,如果未能解决你的问题,请参考以下文章

Fragment全解析系列:那些年踩过的坑

编程中踩过的坑

Java中那些踩过的坑

Mac 下安装wxpython踩过的坑

记录那些年我踩过的坑

ELK搭建踩过的坑