路由拦截 (opens new window)

import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const router = new Router({
  routes: [
    {
      path: "/",
      redirect: "/all", //重定向页面
    },
    {
      path: "/all",
      name: "all",
      component: () => import("@/views/repairsApplication/all"),
      meta: {
        isLogin: true, //是否需要登录
        keepAlive: true, //是否缓存页面
      },
    },
  ],
});

// 判断是否需要登录权限,以及是否登录
router.beforeEach((to, from, next) => {
  if (to.matched.some((r) => r.meta.isLogin)) {
    // 判断是否需要登录
    const token = window.localStorage.getItem("token"); // 将token作为验证的条件
    if (token && token !== "undefined") {
      // 判断是否登录
      next();
    } else {
      // 没有登录则跳到登录页面
      next({
        path: "/home",
        query: { redirect: to.fullPath },
      });
    }
  } else {
    next(); // 不需要验证的直接通过
  }
});
export default router;

vue 路由传参的三种基本方式 (opens new window)

• 方案一

 toDetail(id){
      this.$router.push({
      path:`/detail/${id}`
     })
  }

需要配置的路由对应如下

{
    path:'/detail/:id',
    name:'detail'
}

接收参数

this.$route.params.id;

• 方案二
  父组件中：通过路由属性中的 name 来确定匹配的路由，通过 params 来传递参数。

  WARNING

  注意: 刷新参数会获取不到不建议用

this.$router.push({
  name: "Describe",
  params: {
    id: id,
  },
});

接收参数

this.$route.params.id;

• 方案三
  父组件：使用 path 来匹配路由，然后通过 query 来传递参数 这种情况下 query 传递的参数会显示在 url 后面?id=？

this.$router.push({
  path: "/describe",
  query: {
    id: id,
  },
});

接收参数

this.$route.query.id;

页面修改时修改浏览器标签栏

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next();
});

history 模式下获取当前路由

window.location.href;

跳转同一路由 页面不刷新

• App.vue

<router-view :key="key" />

computed: {
    key() {
      return this.$route.path + Math.random();
    }
  },