router

我就是我 2022-05-31 23:56 95阅读 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>