master

分支 (1)

管理

管理

master

VueLearning
/
9.路由.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"></script>
		-->
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>Router Test</h1>
			<p>
				<router-link to="/lnk1">Go To lnk1</router-link>
				<router-link to="/lnk2">Go To lnk2</router-link>
			</p>
			<router-view></router-view>
		</div>
	</body>
	<script>
		const lnk1={template:'<div>This is link1</div>'}
		const lnk2={template:'<div>This is link2</div>'}
		const routes=[
			{path:'/lnk1', component: lnk1},
			{path:'/lnk2', component: lnk2}
		]
		const router = new VueRouter({
			routes
		})
		const app = new Vue({
			router
		}).$mount('#app')
	</script>
</html>