在页面上向按钮上绑定方法,直接实现路由跳转到其他页面,比如我们想从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>

 

Logo

前往低代码交流专区

更多推荐