VUE路由跳转

import About from '@/components/Home'

Vue.config.productionTip = false

Vue.use(Router)

const routes = [

  {

    path: '',

    redirect: '/Home'                    -----------首页重新定向

  },

  {

    path: '/Home',

    component: Home

  },

  {

    path: '/About',

    component: About

  }

]



new Vue({
  el: '#app',
  router: new Router({ routes,mode:'history'}),---------------这里的mode属性可以去掉url的#
  components: { App },
  template: '<App/>'
})

展示页面配合：

<template>
  <div id="app">
    APP.VUE页
    <router-link to='/Home'>首页</router-link>
      <router-link to='/About'>关于</router-link>
    <router-view></router-view>    -----------------这里是展示区域
  </div>
</template>

按钮跳转：

<template>
  <div id="app">
    APP.VUE页
    <router-link to="/Home">首页</router-link>
    <router-link to="/About">关于</router-link>

    <button @click="homeclick">首页按钮</button>
    <button @click="aboutclick">关于按钮</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    homeclick() {
      this.$router.push('/Home');
      console.log('homeclcik');
    },
    aboutclick() {
      this.$router.push('/About');
      console.log('Aboutclcik');
    }
  }
};
</script>