打开一个VUE项目,目录结构是这样的:

如现在有两个页面aaa和HelloWorld,路由配置在index.js中:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import aaa from '@/components/aaa'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
    	path: '/aaa',
      name: 'aaa',
      component: aaa
    }
  ]
})

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

1、HelloWorld:

<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>

2、aaa:

<template>
	<div>我是aaa
	<button @click="back">点我返回</button>
	</div>
	
</template>

<script>
export default {
  name: 'aaa',
  /*data () {
    return {
      msg: '哈哈'
    }
  },*/
  methods:{
  	back(){
  		this.$router.push('/')
  	}
  }
}
</script>

 

 

 

Logo

前往低代码交流专区

更多推荐