一、Vue-router介绍

Vue-router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
相比起多页应用，单页应用有如下这些好处：

• 无需重复加载公共资源
• 页面切换速度快，用户体验好
• 页面切换可以实现转场动画

虽然单页应用有着难以SEO、开发难度更加大的缺点，但是相比于传统的多页应用有着更好的用户体验上，目前单页应用已经是Web应用开发的潮流

二、Vue-router 使用

1.在codesandbox上创建一个基于Vue的开发环境,并添加Vue-router依赖

添加依赖

2.新建view文件夹，并添加login.vue和home.vue两个文件

• login.vue

<template>
  <div>
    <div><input v-model="name" type="text" placeholder="请输入用户名"></div>
    <div><input v-model="password" type="password" placeholder="请输入密码"></div>
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      password: ""
    };
  },
  methods: {
    login() {
      // 设置登录成功状态
      sessionStorage.setItem("login", this.name);
      // 路由跳转
      this.$router.push("home")
    }
  }
};
</script>

• home.vue

<template>
  <div>首页</div>
</template>

3. 新建router/index.js，并添加如下代码

import Vue from "vue";
import Router from "vue-router";
import home from "../view/home.vue";
import login from "../view/login.vue";
Vue.use(Router);
const router = new Router({
  mode: "history",
  // 配置对应路径下应该加载的组件
  routes: [
    {
      path: "",
      component: login
    },
    {
      path: "/login",
      name: "login",
      component: login
    },
    {
      path: "/home",
      name: "home",
      component: home
    }
  ]
});

// 添加路由守卫，在路由跳转之前执行
router.beforeEach((to, from, next) => {
  // 如果是要去登录页面，则直接允许
  if (to.path === "" || to.path === "/login") {
    sessionStorage.removeItem("login");
    next();
  }
  let isLogin = sessionStorage.getItem("login");
  // 判断用户是否登录
  if (!isLogin) {
    // 没登录则跳转登录页
    next({ path: "/login" });
  } else {
    // 允许跳转
    next();
  }
});

export default router;

4. 在main.js中引入router

import router from "./router";
new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

5. 在App.vue中引入Vue-router组件

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

6.当我们在右侧直接输入/home路径访问时，由于没有登录，直接跳转到了登录页面

登录页面

7. 当输入用户名、密码登录后，则跳转到了首页

   
   首页

vue-router官网
codesandbox代码