【笔记】VueRouter学习笔记

发表于 更新于 分类于 阅读次数：

前言

Vue3通过vue-router实现路由

下载依赖

1
npm install vue-router

创建路由对象

配置模式

哈希模式

request
1
GET http://127.0.0.1:80/#/home
src/router/index.js
1
2
3
4
5
6
7
import { createRouter, createWebHashHistory } from "vue-router"

const router = createRouter({
  history: createWebHashHistory()
});

export default router

历史模式

request
1
GET http://127.0.0.1:80/home
src/router/index.js
1
2
3
4
5
6
7
import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
  history: createWebHistory()
});

export default router

配置路由

name：指定路由名，必须绝对唯一
path：指定路由路径
component：指定组件
meta：跳转路由时携带元数据作为参数

src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { createRouter, createWebHashHistory } from "vue-router"

import Home from "../Views/Home.vue"

const router = createRouter({
  routes: [
    {
      name: "home",
      path: "/home",
      component: Home,
      meta: {
        key: "value"
      }
    }
  ]
});

export default router

重定向到其他路由

  • 通过redirect重定向到其他路由

redirect：重定向到其他路由

src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { createRouter, createWebHashHistory } from "vue-router"

import Home from "../Views/Home.vue"

const router = createRouter({
  routes: [
    {
      path: "/home",
      component: Home
    },
    {
      path: "/",
      redirect: "/home"
    }
  ]
});

export default router

正则匹配

/:pathMatch(.*)：匹配一级
/:pathMatch(.*)*：匹配多级

src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { createRouter } from "vue-router"

import Home from "../Views/Home.vue"

const router = createRouter({
  routes: [
    { 
      path: "/:pathMatch(.*)*",
      component: Home
    },
  ]
});

export default router

动态路由

src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { createRouter } from "vue-router"

import Home from "../Views/Home.vue"

const router = createRouter({
  routes: [
    {
      path: "/home/:id",
      component: Home
    },
  ]
});

export default router

嵌套路由

src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { createRouter } from "vue-router"

import Home from "../Views/Home.vue"

const router = createRouter({
  routes: [
    {
      path: "/father",
      redirect: "/father/son",
      children: [
        {
          path: "son",
          component: Home
        }
      ]
    }
  ]
});

export default router

Webpack打包时分包

webpackChunkName：通过魔法注释自定义打包后的文件名前缀

src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
12
import { createRouter } from "vue-router"

const router = createRouter({
  routes: [
    {
      path: "/home",
      component: () => import(/* webpackChunkName: "home" */"../Views/Home.vue")
    },
  ]
});

export default router

挂载路由对象

src/main.js
1
2
3
4
5
6
7
import { createApp } from "vue"
import router from "./router/index.js"
import App from "./App.vue"

const app = createApp(App);
app.use(router);
app.mount("#app");

跳转路由

通过template跳转路由

  • 通过<router-link></router-link>跳转路由
  • 通过<router-view></router-view>渲染路由

router-link：跳转路由

to=""：指定目标，可以传递字符串，也可以传递对象
replace：替换路由并不保留历史
active-class=""：指定活跃的路由的类名

1
2
3
4
5
6
7
<template>
  <router-link to="/home">首页</router-link>
  <router-link v-bind:to="{ path: '/home' }">首页</router-link>
  <router-link to="/home" replace>首页</router-link>
  
  <router-view></router-view>
</template>

嵌套路由

  • 通过<router-link></router-link>跳转路由
  • 通过<router-view></router-view>渲染路由
src/App.vue
1
2
3
4
5
<template>
  <router-link to="/father/son">首页</router-link>
  
  <router-view></router-view>
</template>

通过script跳转路由

有历史记录的跳转

name：通过name跳转路由
path：通过路径跳转路由
query：跳转路由时携带查询字符串

1
2
3
4
5
6
7
8
9
10
11
12
<script setup>
  import { useRouter } from "vue-router"

  const router = useRouter();

  router.push({
    path: "/home",
    query: {
      key: "value"
    }
  });
</script>
  • 简写
src/App.vue
1
2
3
4
5
6
7
<script setup>
  import { useRouter } from "vue-router"
  
  const router = useRouter();
  
  router.push("/home");
</script>

无历史记录的跳转

1
2
3
4
5
6
7
8
9
10
11
12
<script setup>
  import { useRouter } from "vue-router"

  const router = useRouter();

  router.replace({
    path: "/home",
    query: {
      key: "value"
    }
  });
</script>
  • 简写
src/App.vue
1
2
3
4
5
6
7
<script setup>
  import { useRouter } from "vue-router"
  
  const router = useRouter();
  
  router.replace("/home");
</script>

向后

src/App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div v-on:click="fn">首页</div>
  <router-view></router-view>
</template>

<script setup>
  import { useRouter } from "vue-router"
  
  const router = useRouter();
  
  function fn() {
    router.back();
  }
</script>

向前

src/App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div v-on:click="fn">首页</div>
  <router-view></router-view>
</template>

<script setup>
  import { useRouter } from "vue-router"
  
  const router = useRouter();
  
  function fn() {
    router.forward();
  }
</script>

自定义层级

<num>：正数向前，负数向后，数值表示层级

src/App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
  <div v-on:click="fn">首页</div>
  <router-view></router-view>
</template>

<script setup>
  import { useRouter } from "vue-router"
  
  const router = useRouter();
  
  function fn() {
    router.go(<num>);
  }
</script>

获取参数

元数据

通过template获取参数

1
2
3
<template>
  {{ $router.meta.key }}
</template>

通过script获取参数

1
2
3
4
5
6
7
8
<script setup>
  import { useRoute, onBeforeRouteUpdate } from "vue-router"
  
  onBeforeRouteUpdate(() => {
    const route = useRoute();
    console.log(route.meta.key);
  });
</script>

正则匹配

  • 获取正则匹配到的路由路径
request
1
GET http://127.0.0.1:80/value1/value2

通过template获取参数

1
2
3
<template>
  {{ $router.params.pathMatch }}
</template>

通过script获取参数

1
2
3
4
5
6
7
8
<script setup>
  import { useRoute, onBeforeRouteUpdate } from "vue-router"
  
  onBeforeRouteUpdate(() => {
    const route = useRoute();
    console.log(route.params.pathMatch); // ["value1", "value2"]
  });
</script>

动态路由参数

request
1
GET http://127.0.0.1:80/home/value

通过template获取参数

1
2
3
<template>
  {{ $router.params.key }}
</template>

通过script获取参数

1
2
3
4
5
6
7
8
<script setup>
  import { useRoute, onBeforeRouteUpdate } from "vue-router"

  onBeforeRouteUpdate(() => {
    const route = useRoute();
    console.log(route.params.key); // "value"
  });
</script>

查询字符串

request
1
GET http://127.0.0.1:80/home?key=value

通过template获取参数

1
2
3
<template>
  {{ $router.query.key }}
</template>

通过script获取参数

1
2
3
4
5
6
7
8
<script setup>
  import { useRoute, onBeforeRouteUpdate } from "vue-router"

  onBeforeRouteUpdate(() => {
    const route = useRoute();
    console.log(route.query.key); // "value"
  });
</script>

活跃的路由样式

  • 根据活跃的路由的类名修改路由样式

.router-link-active：对于多级路由会匹配前缀
.router-link-exact-active：对于多级路由会进行精准匹配

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <router-link to="/home">首页</router-link>
  <router-view></router-view>
</template>

<style scoped>
  .router-link-active {
    color: red;
  }
  .router-link-exact-active {
    color: blue;
  }
</style>

对路由的操作

添加路由

添加一级路由

  • 如果路由的name重名，则路由会被替换
src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { createRouter } from "vue-router"

import Home from "../Views/Home.vue"

const router = createRouter({
  routes: [
    {
      path: "/home",
      component: Home
    }
  ]
});

router.addRoute({
  path: "/other",
  component: Home
})

export default router

通过路由name添加子级路由

src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { createRouter } from "vue-router"

import Home from "../Views/Home.vue"

const router = createRouter({
  routes: [
    {
      name: "name",
      path: "/home",
      component: Home
    }
  ]
});

router.addRoute("name", {
  path: "/other",
  component: Home
})

export default router

删除路由

通过路由的name删除路由

src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { createRouter } from "vue-router"

import Home from "../Views/Home.vue"

const router = createRouter({
  routes: [
    {
      name: "name",
      path: "/home",
      component: Home
    }
  ]
});

router.removeRoute("name")

export default router

通过添加路由时的返回值删除路由

src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { createRouter } from "vue-router"

import Home from "../Views/Home.vue"

const router = createRouter({
  routes: [
    {
      name: "name",
      path: "/home",
      component: Home
    }
  ]
});

// 添加路由
const callback = router.addRoute({
  path: "/other",
  component: Home
})

// 删除路由
callback()

export default router

获取路由对象数组

src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { createRouter } from "vue-router"

import Home from "../Views/Home.vue"

const router = createRouter({
  routes: [
    {
      name: "name",
      path: "/home",
      component: Home
    }
  ]
});

const result = router.getRoutes();

export default router

路由导航守卫

  • 通过守卫拦截路由跳转的过程

前置守卫

  • 回调函数的返回值如果为字符串，则表示跳转指定name的路由
  • 回调函数的返回值如果为false，则表示取消当前跳转
  • 回调函数的返回值如果为true、undefined或没有定义返回值，则表示允许当前跳转
  • 回调函数的返回值如果为路径字符串，则表示直接跳转到指定路径
  • 回调函数的返回值如果为路由对象，则表示直接跳转到指定路由
  • 也可以通过next("")指定需要跳转的路由路径或对象
src/router/index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { createRouter } from "vue-router"

import Home from "../Views/Home.vue"

const router = createRouter({
  routes: [
    {
      name: "name",
      path: "/home",
      component: Home
    }
  ]
});

router.beforeEach((to, from, next) => {
  return "name";
});

export default router

完成