vue路由

最新推荐文章于 2022-10-19 21:26:42 发布

YinaBloom

最新推荐文章于 2022-10-19 21:26:42 发布

阅读量71

点赞数

分类专栏：大前端文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/weixin_59095717/article/details/120852493

版权

大前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue路由

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue路由</title>
		<script src="../../../vue/vue.js"></script>
		<script src="../../../vue/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/home">主页</router-link>
			<router-link to="/help">帮助</router-link>
			<router-view></router-view>
		</div>
		<script>
			
			let home = {
				template:"<h1>我是主页</ h1>"
			}
			
			let help = {
				template:"<h1>我是帮助页</ h1>"
			}
			
			let router = new VueRouter({
				routes:[
					{path:'/home',component:home},
					{path:'/help',component:help}
				]
			})
			new Vue({
				el:'#app',
				router
			})
		</script>
	</body>
</html>

总结
在这里插入图片描述

vue路由

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue/vue.js"></script>
		<script src="../vue/vue-router.js"></script>
	</head>
	<body>
		<!-- 需求:点击不同的元素,展示不同的网址 -->
		<div id="app">
			<router-link to="/runoob">runoob</router-link>
			<router-link to="/w3c">w3c</router-link>
			<router-view></router-view>
		</div>
		<script>
			let router = new VueRouter({
				routes:[ //把不同的请求,分发给不同的组件处理
					{ //点击runoob时,匹配到对应的组件,展示runoob的网址
						path:'/runoob',
						component:{
							template:'<h1><a href="https://www.runoob.com">https://www.runoob.com/</a></h1>',
						},
					},
					{ //点击w3c时,匹配到对应的组件,展示w3c的网址
						path:'/w3c',
						component:{
							template:'<h1><a href="https://www.w3school.com.cn">https://www.w3school.com.cn/</a></h1>',
						},
					}
				]
			})
			new Vue({
				el:"#app",
				router
			})
		</script>
	</body>
</html>

YinaBloom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue路由

vue路由<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue路由</title> <script src="../../../vue/vue.js"></script> <script src="../../../vue/vue-router.js"></script> </head&g
复制链接

扫一扫