[Vue warn]: Error in render: “TypeError: Cannot read property ‘matched‘ of undefined“

最新推荐文章于 2023-06-25 16:20:48 发布

请叫我Oscar

最新推荐文章于 2023-06-25 16:20:48 发布

阅读量754

点赞数 1

分类专栏：前后端开发 Vue.js 文章标签： html

本文链接：https://blog.csdn.net/weixin_43356308/article/details/121434897

版权

前后端开发同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

Vue.js

6 篇文章 0 订阅

订阅专栏

在初学Vue路由的时候，以下是为了实现前端页面点击跳转不同url的代码，报出了标题处的错误。代码如下：

（错误代码如下）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		
		
		<div id="app">
			<router-link to="/home">home</router-link>
			<router-link to="/news">news</router-link>
			
			<router-view></router-view>
			
		</div>
		
		
		<script>
			const Home = {
				template:'<div>首页</div>'
			}
			const News = {
				template:'<div>新闻</div>'
			}
			
			let router = new VueRouter({
				mode:"history",
				routes:[{
					path:'/home',
					component:Home
				},
				{
					path:'/news',
					component:News
				}]
			})
			var vm = new Vue({
				el:"#app",
				data:{
					
				},
				router
			})
			
		</script>
	</body>
</html>

后来发现是
在这里插入图片描述
如下：

（正确代码如下）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		
		
		<div id="app">
			<router-link to="/home">home</router-link>
			<router-link to="/news">news</router-link>
			
			<router-view></router-view>
			
		</div>
		
		
		<script>
			const Home = {
				template:'<div>首页</div>'
			}
			const News = {
				template:'<div>新闻</div>'
			}
			
			let router = new VueRouter({
				mode:"history",
				routes:[{
					path:'/home',
					component:Home
				},
				{
					path:'/news',
					component:News
				}]
			})
			var vm = new Vue({
				el:"#app",
				data:{
					
				},
				router
			})
			
		</script>
	</body>
</html>