《关于Vue中的router》

发表于 分类于 ， Valine：

router 路由
应为 vue 是单页应用不会有那么多 html 让我们跳转 所有要使用路由做页面的跳转
Vue 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页 Web 应用

安装

构建前端 vue 项目

1
2
3
npm init vue@latest
//或者
npm init vite@latest

安装 router 版本 4

1
npm install vue-router@4

在 src 目录下面新建 router 文件 然后在 router 文件夹下面新建 index.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
//引入路由对象
import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
  createMemoryHistory,
  RouteRecordRaw,
} from "vue-router";

//vue2 mode history vue3 createWebHistory
//vue2 mode  hash  vue3  createWebHashHistory
//vue2 mode abstact vue3  createMemoryHistory

//路由数组的类型 RouteRecordRaw
// 定义一些路由
// 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: () => import("../components/a.vue"),
  },
  {
    path: "/register",
    component: () => import("../components/b.vue"),
  },
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});
//导出router
export default router;
  • router-link

请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

  • router-view

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div>
    <h1>小满最骚</h1>
    <div>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
      <router-link tag="div" to="/">跳转a</router-link>
      <router-link tag="div" style="margin-left:200px" to="/register">跳转b</router-link>
    </div>
    <hr />
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>
  • 最后在 main.ts 挂载
1
2
3
4
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
createApp(App).use(router).mount("#app");

路由命名和编程式导航

路由命名

除了 path 之外，你还可以为任何路由提供 name。这有以下优点：

  • 没有硬编码的 URL
  • params 的自动编码/解码。
  • 防止你在 url 中出现打字错误。
  • 绕过路径排序（如显示一个）
1
2
3
4
5
6
7
8
9
10
11
12
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Login",
    component: () => import("../components/login.vue"),
  },
  {
    path: "/reg",
    name: "Reg",
    component: () => import("../components/reg.vue"),
  },
];

router-link 跳转方式需要改变 变为对象并且有对应 name

1
2
3
4
5
6
<h1>nagisa</h1>
<div>
  <router-link :to="{name:'Login'}">Login</router-link>
  <router-link style="margin-left:10px" :to="{name:'Reg'}">Reg</router-link>
</div>
<hr />

编程式导航

除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

  1. 字符串模式
1
2
3
4
5
6
import { useRouter } from "vue-router";
const router = useRouter();

const toPage = () => {
  router.push("/reg");
};
  1. 对象模式
1
2
3
4
5
6
7
8
import { useRouter } from "vue-router";
const router = useRouter();

const toPage = () => {
  router.push({
    path: "/reg",
  });
};
  1. 命名式路由模式
1
2
3
4
5
6
7
8
import { useRouter } from "vue-router";
const router = useRouter();

const toPage = () => {
  router.push({
    name: "Reg",
  });
};

a 标签跳转

直接通过 a href 也可以跳转但是会刷新页面

1
<a href="/reg">rrr</a>

历史记录

  • replace 的使用

采用 replace 进行页面的跳转会同样也会创建渲染新的 Vue 组件，但是在 history 中其不会重复保存记录，而是替换原有的 vue 组件；

router-link 使用方法

1
2
<router-link replace to="/">Login</router-link>
<router-link replace style="margin-left:10px" to="/reg">Reg</router-link>

编程式导航

1
2
<button @click="toPage('/')">Login</button>
<button @click="toPage('/reg')">Reg</button>
1
2
3
4
5
6
import { useRouter } from "vue-router";
const router = useRouter();

const toPage = (url: string) => {
  router.replace(url);
};
  • 横跨历史

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步

1
2
<button @click="next">前进</button>
<button @click="prev">后退</button>
1
2
3
4
5
6
7
8
9
const next = () => {
  //前进 数量不限于1
  router.go(1);
};

const prev = () => {
  //后退
  router.back();
};

路由传参

  • Query 路由传参

编程式导航 使用 router push 或者 replace 的时候 改为对象形式新增 query 必须传入一个对象

1
2
3
4
5
6
const toDetail = (item: Item) => {
  router.push({
    path: "/reg",
    query: item,
  });
};

接受参数

使用 useRoute 的 query

1
2
import { useRoute } from "vue-router";
const route = useRoute();
1
2
3
<div>品牌：{{ route.query?.name }}</div>
<div>价格：{{ route.query?.price }}</div>
<div>ID：{{ route.query?.id }}</div>
  • Params 路由传参

编程式导航 使用 router push 或者 replace 的时候 改为对象形式并且只能使用 name，path 无效，然后传入 params

1
2
3
4
5
6
const toDetail = (item: Item) => {
  router.push({
    name: "Reg",
    params: item,
  });
};

接受参数

使用 useRoute 的 params

1
2
import { useRoute } from "vue-router";
const route = useRoute();
1
2
3
<div>品牌：{{ route.params?.name }}</div>
<div>价格：{{ route.params?.price }}</div>
<div>ID：{{ route.params?.id }}</div>
  • 动态路由传参

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件

1
2
3
4
5
6
7
8
9
10
11
12
13
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Login",
    component: () => import("../components/login.vue"),
  },
  {
    //动态路由参数
    path: "/reg/:id",
    name: "Reg",
    component: () => import("../components/reg.vue"),
  },
];
1
2
3
4
5
6
7
8
const toDetail = (item: Item) => {
  router.push({
    name: "Reg",
    params: {
      id: item.id,
    },
  });
};
1
2
3
4
import { useRoute } from "vue-router";
import { data } from "./list.json";
const route = useRoute();
const item = data.find((v) => v.id === Number(route.params.id));

二者的区别

  • query 传参配置的是 path，而 params 传参配置的是 name，在 params 中配置 path 无效
  • query 在路由配置不需要设置参数，而 params 必须设置
  • query 传递的参数会显示在地址栏中
  • params 传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;
  • 路由配置

嵌套路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const routes: Array<RouteRecordRaw> = [
  {
    path: "/user",
    component: () => import("../components/footer.vue"),
    children: [
      {
        path: "",
        name: "Login",
        component: () => import("../components/login.vue"),
      },
      {
        path: "reg",
        name: "Reg",
        component: () => import("../components/reg.vue"),
      },
    ],
  },
];

如你所见，children 配置只是另一个路由数组，就像 routes 本身一样。因此，你可以根据自己的需要，不断地嵌套视图

TIPS：不要忘记写 router-view

1
2
3
4
5
6
7
8
9
<div>
  <router-view></router-view>
  <div>
    <router-link to="/">login</router-link>
    <router-link style="margin-left:10px;" to="/user/reg">
      reg
    </router-link>
  </div>
</div>

命名视图

命名视图可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示。 命名视图可以让一个组件中具有多个路由渲染出口，这对于一些特定的布局组件非常有用。 命名视图的概念非常类似于“具名插槽”，并且视图的默认名称也是 default。

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    components: {
      default: () => import("../components/layout/menu.vue"),
      header: () => import("../components/layout/header.vue"),
      content: () => import("../components/layout/content.vue"),
    },
  },
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

对应 Router-view 通过 name 对应组件

1
2
3
4
5
<div>
  <router-view></router-view>
  <router-view name="header"></router-view>
  <router-view name="content"></router-view>
</div>

重定向

重定向 redirect

  1. 字符串形式配置，访问/ 重定向到 /user （地址栏显示/,内容为/user 路由的内容）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: () => import("../components/root.vue"),
    redirect: "/user1",
    children: [
      {
        path: "/user1",
        components: {
          default: () => import("../components/A.vue"),
        },
      },
      {
        path: "/user2",
        components: {
          bbb: () => import("../components/B.vue"),
          ccc: () => import("../components/C.vue"),
        },
      },
    ],
  },
];
  1. 对象形式配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: () => import("../components/root.vue"),
    redirect: { path: "/user1" },
    children: [
      {
        path: "/user1",
        components: {
          default: () => import("../components/A.vue"),
        },
      },
      {
        path: "/user2",
        components: {
          bbb: () => import("../components/B.vue"),
          ccc: () => import("../components/C.vue"),
        },
      },
    ],
  },
];
  1. 函数模式（可以传参）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: () => import("../components/root.vue"),
    redirect: (to) => {
      return {
        path: "/user1",
        query: to.query,
      };
    },
    children: [
      {
        path: "/user1",
        components: {
          default: () => import("../components/A.vue"),
        },
      },
      {
        path: "/user2",
        components: {
          bbb: () => import("../components/B.vue"),
          ccc: () => import("../components/C.vue"),
        },
      },
    ],
  },
];

别名 alias

将 / 别名为 /root，意味着当用户访问 /root 时，URL 仍然是 /user，但会被匹配为用户正在访问 /

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: () => import("../components/root.vue"),
    alias: ["/root", "/root2", "/root3"],
    children: [
      {
        path: "user1",
        components: {
          default: () => import("../components/A.vue"),
        },
      },
      {
        path: "user2",
        components: {
          bbb: () => import("../components/B.vue"),
          ccc: () => import("../components/C.vue"),
        },
      },
    ],
  },
];

导航守卫

  • 全局前置守卫

router.beforeEach

1
2
3
4
router.beforeEach((to, form, next) => {
  console.log(to, form);
  next();
});

每个守卫方法接收三个参数：

1
2
3
4
5
6
to: Route， 即将要进入的目标 路由对象；
from: Route，当前导航正要离开的路由；
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

权限判断

1
2
3
4
5
6
7
8
9
10
11
12
13
const whileList = ["/"];

router.beforeEach((to, from, next) => {
  let token = localStorage.getItem("token");
  //白名单 有值 或者登陆过存储了token信息可以跳转 否则就去登录页面
  if (whileList.includes(to.path) || token) {
    next();
  } else {
    next({
      path: "/",
    });
  }
});
  • 全局后置守卫

使用场景一般可以用来做 loadingBar
你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

1
2
3
router.afterEach((to, from) => {
  Vnode.component?.exposed?.endLoading();
});

loadingBar 组件

1
2
3
4
5
<template>
  <div class="wraps">
    <div ref="bar" class="bar"></div>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script setup lang='ts'>
import { ref, onMounted } from 'vue'
let speed = ref<number>(1)
let bar = ref<HTMLElement>()
let timer = ref<number>(0)
const startLoading = () => {
    let dom = bar.value as HTMLElement;
    speed.value = 1
    timer.value = window.requestAnimationFrame(function fn() {
        if (speed.value < 90) {
            speed.value += 1;
            dom.style.width = speed.value + '%'
            timer.value = window.requestAnimationFrame(fn)
        } else {
            speed.value = 1;
            window.cancelAnimationFrame(timer.value)
        }
    })
}
const endLoading = () => {
    let dom = bar.value as HTMLElement;
    setTimeout(() => {
        window.requestAnimationFrame(() => {
            speed.value = 100;
            dom.style.width = speed.value + '%'
        })
    }, 500)

}
defineExpose({
    startLoading,
    endLoading
})
</script>

<style scoped lang="less">
.wraps {
    position: fixed;
    top: 0;
    width: 100%;
    height: 2px;
    .bar {
        height: inherit;
        width: 0;
        background: blue;
    }
}
</style>

main.js

1
2
3
4
5
6
7
8
9
10
11
12
import loadingBar from "./components/loadingBar.vue";
const Vnode = createVNode(loadingBar);
render(Vnode, document.body);
console.log(Vnode);

router.beforeEach((to, from, next) => {
  Vnode.component?.exposed?.startLoading();
});

router.afterEach((to, from) => {
  Vnode.component?.exposed?.endLoading();
});

路由元信息

路由元信息
通过路由记录的 meta 属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据，例如：

权限校验标识。
路由组件的过渡名称。
路由组件持久化缓存 (keep-alive) 的相关配置。
标题名称

我们可以在导航守卫或者是路由对象中访问路由的元信息数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      component: () => import("@/views/Login.vue"),
      meta: {
        title: "登录",
      },
    },
    {
      path: "/index",
      component: () => import("@/views/Index.vue"),
      meta: {
        title: "首页",
      },
    },
  ],
});
  • 使用 TS 扩展
    如果不使用扩展 将会是 unknow 类型
1
2
3
4
5
declare module 'vue-router' {
  interface RouteMeta {
    title?: string
  }
}

路由过渡动效

过渡动效
想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 v-slot API：

1
2
3
4
5
<router-view #default="{route,Component}">
    <transition  :enter-active-class="`animate__animated ${route.meta.transition}`">
        <component :is="Component"></component>
    </transition>
</router-view>

上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，你可以将元信息和动态的 name 结合在一起，放在 上：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
declare module 'vue-router'{
     interface RouteMeta {
        title:string,
        transition:string,
     }
}
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('@/views/Login.vue'),
      meta:{
         title:"登录页面",
         transition:"animate__fadeInUp",
      }
    },
    {
      path: '/index',
      component: () => import('@/views/Index.vue'),
      meta:{
         title:"首页！！！",
         transition:"animate__bounceIn",
      }
    }
  ]
})

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 可以自定义路由切换时页面如何滚动。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法

1
2
3
4
5
6
7
8
9
10
11
12
const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: (to, from, savePosition) => {
    console.log(to, '==============>', savePosition);
    return new Promise((r) => {
      setTimeout(() => {
        r({
          top: 10000
        })
      }, 2000);
    })
  },

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

scrollBehavior 返回滚动位置的对象信息，长这样：

{ left: number, top: number }

1
2
3
4
5
6
7
const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: (to, from, savePosition) => {
    return {
       top:200
    }
  },

动态路由

我们一般使用动态路由都是后台会返回一个路由表前端通过调接口拿到后处理(后端处理路由)

主要使用的方法就是 router.addRoute

添加路由
动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由

1
router.addRoute({ path: "/about", component: About });
  • 删除路由

有几个不同的方法来删除现有的路由：

通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径，会先删除路由，再添加路由：

1
2
3
router.addRoute({ path: "/about", name: "about", component: About });
// 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: "/other", name: "about", component: Other });

通过调用 router.addRoute() 返回的回调：

1
2
const removeRoute = router.addRoute(routeRecord);
removeRoute(); // 删除路由如果存在的话

通过使用 router.removeRoute() 按名称删除路由：

1
2
3
router.addRoute({ path: "/about", name: "about", component: About });
// 删除路由
router.removeRoute("about");

需要注意的是，如果你想使用这个功能，但又想避免名字的冲突，可以在路由中使用 Symbol 作为名字。
当路由被删除时，所有的别名和子路由也会被同时删除

  • 查看现有路由
    Vue Router 提供了两个功能来查看现有的路由：

router.hasRoute()：检查路由是否存在。
router.getRoutes()：获取一个包含所有路由记录的数组。