[Unknown custom element: 《router-link》 - did you register the component correctly?

写一下我在测试Vue路由所遇到的坑，上面是浏览器提示的错误。这个让我感觉很纳闷啊！我已经把vue-router.js和vue-.js导进来了，开始为什么会报这样的错误呢？下面是我的代码。<!DOCTYPE html><html><head><meta charset="UTF-8

Whend_

15066人浏览 · 2018-06-04 11:41:35

Whend_ · 2018-06-04 11:41:35 发布

写一下我在测试Vue路由所遇到的坑，上面是浏览器提示的错误。这个让我感觉很纳闷啊！我已经把vue-router.js和vue-.js导进来了，开始为什么会报这样的错误呢？下面是我的代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="box">
			<div>
				<router-link to="/home">主页</router-link>
				<router-link to="/news">新闻</router-link>
			</div>
			<div>
				<router-view></router-view>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		//创建模板
		var Home = {
			template: `<div><h2>我是主页</h2></div>`
		}
		var News = {
			template: `<div><h2>我是新闻</h2></div>`
		}
		//配置路由，创建路由实例
		var router = new VueRouter({
			routes: [{
					path: '/home',
					component: Home
				},
				{
					path: '/news',
					component: News
				},
				{
					path: '*',
					redirect:'/home'
				}
			]
		})
		new Vue({
			router: router,
			el: '#box',
		})
	</script>

</html>

非常简单的一个路由应用，认真看是什么问题都没有。认真想一下，其实这是vue-router.js加载不成功的原因，为什么？

因为html文档是从上到下按顺序解读的。

就好像我们写在<body>前面<script>一样需要先window.οnlοad=function ( ){ }

vue.js里面有加载路由器的一些方法。当浏览器先解读vue-route.js的时候就没有了前置条件，所以我们就需要把

<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>

写在

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

的后面。（以下）

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

<script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script>

问题就解决了。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^