通过路由跳转到一个全新的页面

1.  在app.vue输入  <router-view></router-view>

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components:{

  },
}
</script>

2.  router下的index.js中引入需要使用的组件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)

export default new Router({
  // mode: 'history',
  routes: [
    {
      path:'/',
      component: MobileMain => require(['../components/MobileMain'], MobileMain),
    },
    {
      path:'/MobileMain',
      component: MobileMain => require(['../components/MobileMain'], MobileMain),
    },
    {
      path: '/MobileAccount',
      component: MobileAccount => require(['../components/MobileAccount'], MobileAccount),
    },
    {
      path: '/MobileComplete',
      component: MobileComplete => require(['../components/MobileComplete'], MobileComplete),
    }
  ]
})

3. 给按钮添加点击事件

<div class="signBtn" @click="signUp">
    jump
</div>

methods:{
  signUp(){
    this.$router.push({
      path:'/MobileAccount'
    })
  }
},

 

参考：https://blog.csdn.net/ygy211715/article/details/79770236