Vue学习——点击跳转网页传参数值（路由传值）、生命周期、报错Property or method “” is not defined、提示窗口

目录

Vue点击跳转网页传参数值

Vue路由传值this.$router.push()

Vue 生命周期created和activated区别

Vue 报错 未声明反应性属性

Vue 提示窗口

---

Vue点击跳转网页传参数值

在a页面点击跳转到b页面后，想要在b页面显示a页面的参数

这让我想到了QT的点击按钮跳到新窗口，都是父子结构（a主页是父）

其实这个过程在Vue中称为路由传值，知道了过程再百度就发现能找到更多的内容，对于初学者来来说百度有时候都是一件困难的事情，因为不知道要做的是什么，只能白话文描述，所有我的文章中也会有白话文描述，方便大家搜索~

Vue路由传值this.$router.push()

官网深度学习地址：编程式的导航 | Vue Router

//A主页面定义按钮元素，click点击后到方法中执行跳转
<el-button
 size="small"
 type="primary"
 @click="seeTrack(scope.row)"
>查看足迹</el-button>
export default {
 data() {
 methods: {
 //执行点击函数，先console打印日志，传递路径path，传递参数item
    seeTrack(item){
      console.log("查看该设备足迹",item);
      this.$router.push({
        path: "/TrackMap",
        query: {
          item: item,
       	 },
      });
},
  },
};

//B子页面,在子页面获取主页传递的参数
export default {
 data() {
    created() {
    // 获取列表页传参，自定义函数名items可改可调用
let items = this.$route.query.item;
},

  },
};

Vue 生命周期created和activated区别

二者都是做处理数据以及操作的函数，

区别在于生命周期，也就是开始执行和停止的时间不一样

created在创建新页面的渲染网页之前会被调用，只调用一次

activated在渲染期间不被调用，但是在涉及到keep-alive动态组件就调用

官网介绍以及生命周期图

API — Vue.js

API — Vue.js

Vue 实例 — Vue.js

Vue 报错 未声明反应性属性

Vue报错Property or method "list" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

原因：“xxx”在代码中使用，但是没有初始化声明，

检查双引号“xxx”在data return中是否进行初始化声明（注意区分大小写！！！）

官网解释: Reactivity in Depth — Vue.js

Vue 提示窗口

消息的类型定义有（info，success，waring，error），展示的效果也是不一样

            this.$message.info('消息');
            this.$message.success('成功');
            this.$message.warning('警告');
            this.$message.error('错误');