Vue Router

官方文档

安装 Vue Router

如果你使用 Vue CLI 脚手架新建项目，vue-router 已经默认安装好了。

yarn add vue-router

使用 Vue Router

创建基础路由文件

在 src/router 文件夹下新建 index.js 文件，并添加以下代码：

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/login",
    name: "login",
    component: () => import("@/views/Login/MyLogin.vue"),
  },
  {
    path: "*",
    name: "AllNotFound",
    component: () => import("@/views/ExceptionPage/NotFound.vue"),
  },
];

const router = new VueRouter({
  routes,
});

export default router;

添加登录权限拦截

修改 src/router/index.js 文件，添加以下代码：

router.beforeEach((to, from, next) => {
  if (to.path === "/login") {
    next();
  } else {
    let token = localStorage.getItem("token");
    if (token) {
      next();
    } else {
      next("/login");
    }
  }
});

当 token 不存在时，跳转到登录页面。

常用方法

// 跳转登录页面，并在页面历史中添加该记录
$router.push({ path: "/login" });

// 跳转到登录页面，并替换当前页面历史记录
$router.replace({ path: "/login" });

// 返回上一页
$router.go(-1);

引入 Vue Router

在 src/main.js 文件中引入 Vue Router，内容如下：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

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