如现在有两个页面Login和Home,路由配置在index.js中:
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/views/login/Login.vue'
import Home from '@/components/views/home.vue'


//懒加载方式,当路由被访问的时候才加载对应组件
// const Login = resolve => require(['@/components/views/login/Login'], resolve)


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '登录',
      component: Login
    },
    {
      path: '/Home',
      name: '首页',
      component: Home
    }
  ]
})

现在在Login中点击按钮跳转到Home,在Home中点击按钮也可以返回到Login:

Login页面:

<div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="go">点我跳转</button>
</div>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '哈哈'
    }
  },
  methods:{
      go(){
          this.$router.push('/aaa')
      }
  }
}
</script>
home页面:

<template>
    <div>我是aaa
    <button @click="back">点我返回</button>
    </div>
    
</template>
 
<script>
export default {
  name: 'aaa',
  /*data () {
    return {
      msg: '哈哈'
    }
  },*/
  methods:{
      back(){
          this.$router.push('/')
      }
  }
}
</script>
 

Logo

前往低代码交流专区

更多推荐