router

最新推荐文章于 2020-11-19 17:26:01 发布

spfLinux

最新推荐文章于 2020-11-19 17:26:01 发布

阅读量265

点赞数

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

vue 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!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>

spfLinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
router

var Login=Vue.component('login-component',{ methods:{ handleClick:function(){ this.$router.push('/myRegister'); } }, template:` 这是登录界面注册注册 ` });
复制链接

扫一扫

专栏目录