vue路由使用问题:Error in render TypeError Cannot read property 'matched' of undefined

记一个使用vue-router时的低级错误。

使用vue-router时,打开网页出现如下错误:

一开始我以为是vue-router没有安装好,重装后发现问题仍然存在。仔细检查过后发现问题出在main.js中的Vue对象中没有引用router:

在此总结一下使用vue-router的步骤

  • 首先安装好vue-router后中,配置router文件夹下的index.js时分如下三步:
import Vue from 'vue'
import VueRouter from 'vue-router'

// 采用懒加载的方式引入组件
const Home = () => import('../views/home/Home');

//1.安装插件
Vue.use(VueRouter);

//2.创建路由对象
const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },

]
const router = new VueRouter({
  routes,
  mode: "history"
})

//3.导出router
export default router

注意要进行导出。

  • 在main.js中引入index.js中导出的router对象,并在新建的Vue对象中引用。
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //不要忘了引用router
  router,
  render: h => h(App)
})

vue路由使用问题:Error in render TypeError Cannot read property 'matched' of undefined

原文地址:https://www.cnblogs.com/AhuntSun-blog/p/12353408.html

时间: 2024-10-08 06:41:35

vue路由使用问题:Error in render TypeError Cannot read property 'matched' of undefined的相关文章

vue2.XX 提示[Vue warn]: Error in render: "TypeError: Cannot read property 'img' of undefined"

item 是向后台请求的一条数据,里面包含img,但是却提示img未定义 父组件向子组件传递数据时, 子组件 具体代码: <img :src="item.img" /> 提示: 出现的原因: 可能是页面渲染和请求数据是异步操作, 数据还未请求结束,页面已经开始渲染了,所以刚开始报未定义变量, 等数据获取结束后,再次渲染,页面内容出来了,但是刚开始的警告也出来了 解决办法: 1. <img :src="item && item.imgUrl&q

Vue(踩坑)vue.esm.js?efeb:628 [Vue warn]: Error in render: &quot;TypeError: Cannot read property &#39;0&#39; of undefined&quot; found in

1.项目报错如下 2.原因: 异步显示的数据先显示vuex中的初始数据,再显示请求的数据,一开始在vuex中state中的初始数据为空,报错是因为在显示初始数据的时候报错 3.解决:避免在没有数据的时候显示解析(有数据才解析) 有数据的时候div才存在,用v-if控制一下 5.总结:表达式有一层表达式(a),二层表达式(a.b),三层表达式(a.b.c), 当表达式三层的时候就有问题:比如a开始为空,a.b:的结果为undefined, a.b.c你再取的时候就会报错了 Vue(踩坑)vue.e

[Vue warn]: Error in render: &quot;TypeError: Cannot read property &#39;length&#39; of null&quot;

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of null" 看到ta,总是能让人勾起心中的躁动,呼吸变得急促,嘴唇有些干涩,眼神瞬间专注,思想更是达到了忘我的境界,因为老板说,今天bug不改完就不能去吃晚饭哇! 看到这样的报错是最让人一头雾水的,渲染出错,要定位到是什么标签引起的,标签为什么引发这样的报错,错误代码定位可以用排除法,把错误的代码注释掉,如果不报错了,那就是注释的代码出了问

设置marbles . step 4 error error: Caught exception: TypeError: Cannot read property &#39;getConnectivityState&#39; of undefined

参考链接:https://github.com/IBM-Blockchain/marbles/issues/220 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px "Meslo LG M for Powerline"; color: #f4f4f4; background-color: rgba(0, 0, 0, 0.85) } span.s1 { color: #c33720 } span.s2 { } span.s3 { c

vue 报错解决:TypeError: Cannot read property &#39;_t&#39; of undefined&quot;

前端报错如下: [Vue warn]: Error in render: "TypeError: Cannot read property '_t' of undefined" 是在项目中用了多语言配置,vue 跟 i18n之间的兼容问题.解决方法如下: Vue.use(iView) 替换成 Vue.use(iView, { i18n: function(path, options) { let value = i18n.t(path, options) if (value !== n

Vue ERROR TypeError: Cannot read property &#39;upgrade&#39; of undefined

跑vue项目的时候报错,最后终于解决,链接地址如下: https://segmentfault.com/a/1190000019532841: 截图如下(*.env中要定义变量,注释掉也会报错): Vue ERROR TypeError: Cannot read property 'upgrade' of undefined 原文地址:https://www.cnblogs.com/sherlock-Ace/p/11320224.html

VUE - 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property &#39;xxxx&#39; of undefined 的解决办法

created() { var that=this axios.get('http://jsonplaceholder.typicode.com/todos') .then(function (res) { // handle success // console.log(res); that.todos = res.data }) .catch(function (error) { // handle error console.log(error); }) .finally(function

Vue ElementUI Axios报错: Uncaught (in promise) TypeError: Cannot read property &#39;$message&#39; of undefined

从头再来!!! 出错的代码如下: login() { this.loading = true let userInfo = {account: this.loginForm.account, password: this.loginForm.password, captcha: this.loginForm.chptcha} this.$api.login.login(userInfo).then( function(res) { if (res.msg != null) { this.$mes

【转载】vue提示Uncaught TypeError: Cannot read property &#39;push&#39; of undefined

原文地址:https://segmentfault.com/q/1010000007383512?share_user=1030000013014061 附vue入门:https://www.cnblogs.com/Leo_wl/p/5632703.html [转载]vue提示Uncaught TypeError: Cannot read property 'push' of undefined 原文地址:https://www.cnblogs.com/stefango/p/9060997.ht