Vue Router基础知识整理

官方文档-> Vue Router官方文档

1. 安装与使用（Vue3）

安装

npm install vue-router@4 或 yarn add vue-router@4
版本4适用于Vue3，Vue2请使用版本3

使用

• 文件结构：

• @/router/index.js：

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    component: ()=> import('@/views/index.vue'),
    name: 'index',
    meta: { title: '首页', icon: '', keepAlive: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• @/main.js：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'

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

1
2
3
4
5
6
7
8

• @/App.vue：

<template>
  <router-view v-if="!$route.meta.keepAlive" />
  <router-view  v-slot="{ Component }" v-if="$route.meta.keepAlive">
      <keep-alive>
        <component :is="Component">component>
      keep-alive>
  router-view>
  
  
  
template>

<script setup>
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2. 配置路径别名@和VSCode路径提示（了解）

（作为了解，新建Vue3项目时已配有）

• 配置路径别名@在代码编写编写中代替 /src
  
• VSCode路径提示
  

3. 使用查询字符串或路径传参

query

<template>
  <h1>我是首页h1>
  <p>{{ route.query }}p>
template>
<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter();
const route = useRoute();
script>
1
2
3
4
5
6
7
8
9
10

（选项式API用this.$route.query）

动态路由 与 params

@/router/index.js：

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    component: ()=> import('@/views/index.vue'),
    name: 'index',
    meta: { title: '首页', icon: '', keepAlive: true }
  },
  {
    path: "/user/:id/username/:username",
    component: ()=> import('@/views/user.vue'),
    name: 'user',
    meta: { title: '个人主页', icon: '', keepAlive: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

（:[parma参数名]?表示该参数可不填）

<template>
  <h1>我是个人主页h1>
  <p>{{ route.params }}p>
template>
<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter();
const route = useRoute();
script>
1
2
3
4
5
6
7
8
9
10

（选项式API用this.$route.params ）

4. router-link、定义别名、定义路由名称、编程式导航

定义别名 alias

alias

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    // alias: "/home", // 单个
    alias: ["/home", "/index"], // 多个
    component: ()=> import('@/views/index.vue'),
    name: 'index',
    meta: { title: '首页', icon: '', keepAlive: true }
  },
  {
    path: "/user/:id?/username/:username",
    component: ()=> import('@/views/user.vue'),
    name: 'user',
    meta: { title: '个人主页', icon: '', keepAlive: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

路径/ 和 /home、/index 是同一页面

router-link 与 定义路由名称

  <router-link to="/home?title=标题&id=1006">查询字符串传参router-link>
  <router-link :to="{path: '/home', query: { title : '标题', id: 1006 }}">查询字符串传参 - 动态属性绑定router-link>

  <router-link to="/user/1006/username/hsy">路径传参router-link>
  <router-link :to="{name: 'user', params: { id : 1006, username: 'hsy' }}">路径传参 - 动态属性绑定router-link>
1
2
3
4
5

编程式导航 router.push()

<template>
  <button @click="goto(1)">跳转首页button>
  <button @click="goto(2)">跳转个人主页button>
template>
<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter();
const route = useRoute();

function goto(type = 1) {
  if(type === 1) {
    // router.push('/home?title=标题&id=1006')
    router.push({path: '/home', query: { title : '标题', id: 1006 }});
  } else {
    // router.push('/user/1006/username/hsy')
    router.push({name: 'user', params: { id : 1006, username: 'hsy' }});
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5. 嵌套路由 children

• @/router/index.js：

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    // alias: "/home", // 单个
    alias: ["/home", "/index"], // 多个
    component: ()=> import('@/views/index.vue'),
    name: 'index',
    meta: { title: '首页', icon: '', keepAlive: true }
  },
  {
    path: "/user/:id?/username/:username",
    component: ()=> import('@/views/user.vue'),
    name: 'user',
    meta: { title: '个人主页', icon: '', keepAlive: true }
  },
  {
    path: "/vip",
    component: ()=> import('@/views/vip/index.vue'),
    name: 'vip',
    meta: { title: '会员页', icon: '', keepAlive: true },
    children: [
      {
        path: 'info',
        component: ()=> import('@/views/vip/info.vue'),
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router;
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

• @/views/vip/index.vue

<template>
  <h1>会员页h1>
  -----------------------------
  <router-view>router-view>
  -----------------------------
template>
1
2
3
4
5
6

6. 重定向 redirect

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/",
    // alias: "/home", // 单个
    alias: ["/home", "/index"], // 多个
    component: ()=> import('@/views/index.vue'),
    name: 'index',
    meta: { title: '首页', icon: '', keepAlive: true }
  },
  {
    path: "/user/:id?/username/:username",
    component: ()=> import('@/views/user.vue'),
    name: 'user',
    meta: { title: '个人主页', icon: '', keepAlive: true }
  },
  {
    path: "/vip",
    component: ()=> import('@/views/vip/index.vue'),
    name: 'vip',
    meta: { title: '会员页', icon: '', keepAlive: true },
    children: [
      {
        path: 'info',
        component: ()=> import('@/views/vip/info.vue'),
      }
    ]
  },
  {
    path: '/myhome',
    // redirect : '/',
    // redirect : '/?title=标题&id=1006',
    // redirect : {
    //   path: '/',
    //   query: {
    //     title: '标题',
    //     id: 1006,
    //   }
    // },
    // redirect : '/user/1006/username/hsy',
    redirect : {
      name: 'user',
      params: {
        username: 'hsy',
        id: 1006,
      }
    },
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router;
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
49
50
51
52
53
54
55
56
57

7. 全局前置守卫

main.js：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'

const app = createApp(App)
app.use(router)
//  路由前置守卫
router.beforeEach((to, from, next) => {
  console.log('即将进入的路由的信息to:',to);
  console.log('当前即将离开的路由的信息from:',from);
  if(to.name === "user") {
    // next(false); // 拦截不跳转
    next({path: '/home'}); // 拦截跳转到首页
  } else {
    next(); // 不拦截
  }
})
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18