router
程序员文章站
2022-06-03 09:38:32
...
<!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>上一篇： 浅谈软连接和硬链接
下一篇： MySQL Router 8 详解