Vue路由(写死template版)

最新推荐文章于 2024-07-23 16:00:30 发布

chijiajing

最新推荐文章于 2024-07-23 16:00:30 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习

本文链接：https://blog.youkuaiyun.com/chijiajing/article/details/82884439

学习专栏收录该内容

96 篇文章

订阅专栏

本文详细介绍如何使用Vue.js和Vue Router实现基本的单页应用导航功能，包括页面跳转和组件显示。通过实例展示了如何配置路由，创建导航链接，并在不同的路径下展示相应的组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 必须先导包 -->
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
	<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
	<div id="box">
		<ul>
			<!-- 作用:点击不同li显示不同组件 -->
			<!-- router-link to是下面routes配置的地址 -->
			<li><router-link to="/home">首页</router-link></li>
			<li><router-link to="/new">新闻</router-link></li>
			<li><router-link to="/hot">热点</router-link></li>
		</ul>
		<!-- 把点击组件显示出来的元素router-view -->
		<div><router-view></router-view></div>
	</div>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#box",
			/*顺序是:router对应一个新的VueRouter→VueRouter里有routes属性→routes把地址和组件模板对应起立*/
			/*自定义路由VueRouter*/
			router:new VueRouter({
				//routes属性的作用是把地址和组件模板对应起来
				routes:[
				{	
					//地址名,router-link的地址
					path:"/home",
					//component就是组件模板
					component:({template:"<h1>首页</h1>"})
				},
				{
					path:"/new",component:({template:"<h1>新闻</h1>"})
				},
				{path:"/hot",component:({template:"<h1>热点</h1>"})
				}
				]
			})
		})
		
	</script>
</body>
</html>