1. 程式人生 > >vue兩個頁面跳轉

vue兩個頁面跳轉

如現在有兩個頁面Login和Home,路由配置在index.js中:
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/views/login/Login.vue'
import Home from '@/components/views/home.vue'


//懶載入方式,當路由被訪問的時候才載入對應元件
// const Login = resolve => require(['@/components/views/login/Login'], resolve)


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '登入',
      component: Login
    },
    {
      path: '/Home',
      name: '首頁',
      component: Home
    }
  ]
})

現在在Login中點選按鈕跳轉到Home,在Home中點選按鈕也可以返回到Login:

Login頁面:

<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> home頁面:

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