Vue:router直接绑定按钮button实现页面的跳转
在页面上向按钮上绑定方法,直接实现路由跳转到其他页面,比如我们想从HelloVue页面跳转到Demo页面和它的上级页面HelloWorld页面,该怎么写呢?我们可以直接在按钮上绑定一个方法,用this.$router.push(目标路由) 直接实现路由的跳转<template><div id="app"><el-container>...
·
在页面上向按钮上绑定方法,直接实现路由跳转到其他页面,比如我们想从HelloVue页面跳转到Demo页面和它的上级页面HelloWorld页面,该怎么写呢?
我们可以直接在按钮上绑定一个方法,用this.$router.push(目标路由) 直接实现路由的跳转
<template>
<div id="app">
<el-container>
<el-header>
</el-header>
<el-main>
<!-- <router-link to="demo">跳转至demo页面</router-link> -->
<el-button type="primary" @click="addRoutes1">跳转至demo页面</el-button>
<!-- <router-link to="./">返回至HelloWorld页面</router-link> -->
<el-button type="info" @click="addRoutes2">返回至HelloWorld页面</el-button>
</el-main>
</el-container>
</div>
</template>
<script type="text/javascript">
export default {
components: {
},
name: 'wangcan',
data () {
// 注意:data即使不需要传数据,也必须return,否则会报错
return {
},
methods: {
addRoutes1 () {
this.$router.push('/demo')
},
addRoutes2 () {
this.$router.push('./')
}
}
}
</script>
<style type='text/css'>
</style>
更多推荐
已为社区贡献15条内容
所有评论(0)