router

最新推荐文章于 2024-11-29 09:12:36 发布

spfLinux

最新推荐文章于 2024-11-29 09:12:36 发布

阅读量304

点赞数

分类专栏： vue 文章标签： router

vue 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个使用Vue.js和Vue Router实现的基本应用案例，包括登录、注册及主页面间的导航功能。通过点击按钮触发路由跳转，展示了Vue组件的定义与使用。

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
	<div id="example">
		<router-view></router-view>
	</div>

	<script type="text/javascript">
		var Login=Vue.component('login-component',{
			methods:{
				handleClick:function(){
					this.$router.push('/myRegister');
				}
			},
			template:`
				<div>
					<h1>这是登录界面</h1>
					<button @click="handleClick">注册</button>
					<router-link to="/myRegister">注册</router-link>
				</div>
			`
		});

		var Register=Vue.component('register-component',{
			template:`
				<h1>这是注册界面</h1>
			`
		});

		const myRoutes=[
			{path:'/myLogin',component:Login},
			{path:'/myRegister',component:Register}
		];

		const myRouter=new VueRouter({
			routes:myRoutes
		});

		new Vue({
			el:'#example',
			router:myRouter,
			data:{

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/vue-router.js"></script>
</head>
<body>
	<div id="example">
		<router-view></router-view>
	</div>

	<script type="text/javascript">
		var Login=Vue.component('login-component',{
			template:`
				<div>
					<h1>登录页面</h1>
					<router-link to="/myMain">主页面</router-link>
				</div>
			`
		});

		var Main=Vue.component('main-component',{
			methods:{
				logout(){
					this.$router.push('/myLogin');
				}
			},
			template:`
				<div>
					<h1>主页面</h1>
					<button @click="logout">退出登录</button>
				</div>
			`
		});

		const myRoutes=[
			{path:'/myLogin',component:Login},
			{path:'/myMain',component:Main}
		];

		const myRouter=new VueRouter({
			routes:myRoutes
		})

		new Vue({
			el:'#example',
			router:myRouter
		})
	</script>
</body>
</html>