vue路由切换

最新推荐文章于 2025-02-21 22:01:10 发布

原创最新推荐文章于 2025-02-21 22:01:10 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue路由

前端学习记录专栏收录该内容

75 篇文章

订阅专栏

博客围绕Vue和Vue路由展开，但具体内容缺失。Vue是前端开发常用框架，Vue路由则用于实现单页面应用的路由功能，在前端开发中十分重要。

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


<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript" src="vueRouter.js"></script>
</head>
<body>
<div id="app">
	<router-view></router-view>
	<router-link to="/index1">1page</router-link>
	<router-link to="/index2">2page</router-link>
	<router-link to="/index3">3page</router-link>
	
</div>
<script>
	// 创建一个路由
	var router = new VueRouter({
		routes:[
			{
				path:'/index1',
				component:{
					template:`
						<div>路由第一页</div>
					`
				}
			},
			{
				path:'/index2',
				component:{
					template:`
						<div>路由第2页</div>
					`
				}
			},
			{
				path:'/index3',
				component:{
					template:`
						<div>路由第3页</div>
					`
				}
			}
		]
	})
	new Vue({
		el:'#app',
		router:router

	})
</script>
</body>
</html>