记一个使用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