Vue.beforeEach is not a function报错
使用导航守卫改变页面的title时报错了,明明在beaforeEach的参数中写了箭头函数也报下面的错误

后面发现我的问题在于直接导出了export.default new Router({……})中的内容,然后写的Router.beforeEach,直接给Router这个路由插件使用了beforeEach,应该给声明的路由实例添加beforeEach方法才对,使用const router = new Router({……}) 然后使用router.beforeEach就可以了,具体写法如下

next()是函数体所必须的,支持路由往下跳转的回调,to和from的意思就是从(from)哪个路由跳转到(to)哪个路由去,但是有些时候按照to.meta可能会取不到元数据,比如有路由的嵌套也就是routers中含有children的时候
将to打印出来,to中有一个mached,是一个数组,在[0]的位置可以看到我们在路由中定义的元数据meta
在实际项目中方法里面最好写document.title=to.matched[0].meta.title
Vue.beforeEach is not a function报错的更多相关文章
- vue 使用webpack打包后路径报错以及 alias 的使用
一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. b ...
- Vue学习笔记-vue-element-admin 按装报错再按装
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- Vue入门之旅:一报错 Unknown ... make sure to provide the "name" option及error compiling template
报错一: Unknown custom element: <custom-select> - did you register the component correctly? For r ...
- vue项目中使用echarts map报错Cannot read property 'push' of undefined nanhai.js
在vue中绘制地图需要加载一个本地china.json文件,我用的是get请求的方法加载的,而不是直接import,因为我怕import请求到的部署到线上的时候会有问题.如下是get请求方法: thi ...
- vue 将值存储到vuex 报错问题
报错 :Vuex - Computed property “name” was assigned to but it has no setter 如何解决: computed: { addModal: ...
- angularjs 遇见$scope,xxx=function()报错为该函数未定义
本包子今天遇见一个问题,就是明明写了$scope,xx=function()但是报错了,报错显示是该函数未定义,我就很着急的先将函数写成一个全局函数,就没问题,等下午有空的时候寻思了一下,为什么全局就 ...
- 微信小程序中 this.setData is not a function报错
在微信小程序中我们一般通过以下方式来修改data中的数据: 比如获取小程序缓存: wx.getStorage({ key: 'is_screen', success: function (res) { ...
- _self.$scopedSlots.default is not a function报错
问题: 当同一页面有elementUI的多个table表格时,如果用到v-if来动态展示表格,切换时出现如下报错: 原因: 是因为表格是element-ui通过循环产生的,而vue在dom重新渲染时有 ...
- vue安装遇到的5个报错小结
前言 这篇博文不会教你怎么安装vue,但会告知安装过程中可能遇到的5个问题 2017年我写过一篇安装vue的博客,详情:https://www.cnblogs.com/tu-0718/p/752109 ...
- Nuxt.js vue init nuxt-community/koa-template 初始化项目报错
报错提示: Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functi ...
随机推荐
- [转帖]Strace + pstack发现耗时点
https://www.jianshu.com/p/10ea6fff562c 如何使用strace+pstack利器分析程序性能 本文摘抄自如何使用strace+pstack利器分析程序性能 程序说明 ...
- ABP vNext系列文章04---DynamicClient动态代理
一.动态代理在ABP系统中的应用 1.它主要在做什么事件 之前开发系统想要在后台调用别的服务都是用HttpClient发起请求,在abp vnext中不需要我们这样做了, 你只要知道服务调用的接口方法 ...
- border多层渐变
.content { margin-top: 19px; border-top: 1px dashed rgba(113, 183, 248, 0.6) !important; border-left ...
- 【一】LaTeX的安装和使用、安装TeXstudio、中文界面输出设置
安装方法一:(推荐) 下载链接·:http://tug.org/texlive/acquire-netinstall.html 下载zip,然后运行Windows批处理脚本(install-tl-wi ...
- 5.11 汇编语言:仿写IF条件语句
条件语句,也称为IF-ELSE语句,是计算机编程中的一种基本控制结构.它允许程序根据条件的真假来执行不同的代码块.条件语句在处理决策和分支逻辑时非常有用.一般来说,条件语句由IF关键字.一个条件表达式 ...
- SpringCloud-04-http客户端Feign
http客户端Feign 1.Feign的介绍 Feign是一个声明式的http客户端,官方地址:https://github.com/OpenFeign/feign 其作用就是帮助我们优雅的实现ht ...
- 解决线程不安全的方式(Java)
一.同步代码块 package com.synchronized1; // 买票示例 // 使用同步代码块解决线程安全问题 public class TicketRunnableImp impleme ...
- Android 开机流程介绍
目录 一.目的 二.环境 三.相关概念 3.1 Android平台架构 3.2 Android启动架构 3.3 zImage 3.4 RAMDISK 3.5 RC文件 四.详细设计 4.1 Boot ...
- TfrxReport.Clear。尽量慎用。
for MyXuHaoKey in MyXuHaoJianRongSanJieKouDataDicApi.KeySortList do begin //标记下打印编号,吸入淘打的客户 MyTradeA ...
- Kafka-合理设置broker、partition、consumer数量
1.broker的数量最好大于等于partition数量 一个partition最好对应一个硬盘,这样能最大限度发挥顺序写的优势. 一个broker如果对应多个partition,需要随机分发,顺序I ...