VUE项目实现页面跳转

打开一个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>

 

转载于:https://www.cnblogs.com/Free-Thinker/p/10724053.html