Vue中使用router进行页面跳转

本文以推出登录为例，点击“退出登录”按钮，返回到登录页面

在路由中增加需要跳转的页面

1)在router文件夹下的router.js或者index.js文件中引入组件页面
从Login.vue文件中引入Login组件

router/index.js

import Login from '../components/Login.vue'

2)写入Login组件的路由

router/index.js

Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    redirect:'/login'
  }
]
export default router

在文件中使用路由跳转

1）定义button，点击触发事件

Home.vue

<el-button @click="logOut">退出登录</el-button>

2）事件进行处理
2.1）window.sessionStorage.clear();是清除token，非必要
2.2）this.$router.push("/login");跳转到login

Home.vue

logOut() {
            window.sessionStorage.clear();
            this.$router.push("/login");
        }