vue兩個頁面跳轉
阿新 • • 發佈:2018-12-17
如現在有兩個頁面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>