目录

 

演示

代码

---

演示

运行截图如下：

点击后，url跳转如下：

 

 

代码

页面跳转的关键

程序结构如下：

aaa.vue

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

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="go">点我跳转</button>
  </div>
 
</template>
 
<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: '哈哈'
      }
    },
    methods:{
      go(){
        this.$router.push('/aaa')
      }
    }
  }
</script>
 
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

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({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/aaa',
      name: 'aaa',
      component: aaa
    }
  ]
})

通过设置mode: 'history'可以去掉url下面的