vue3_07

vue-router

安装

npm install vue-router@4

创建 router

首先创建一个 /src/router/a5router.ts 文件，在其中定义路由

import {createRouter, createWebHashHistory} from 'vue-router'
import A51 from '../views/A51.vue'
import A52 from '../views/A52.vue'
// 路由 => 路径和组件之间的对应关系
const routes = [
  {
    path: '/a1',
    component: A51
  },
  {
    path: '/a2', 
    component: A52
  }
]

const router = createRouter({ 
  history: createWebHashHistory(), // 路径格式
  routes: routes // 路由数组
})

export default router

• createWebHashHistory 是用 # 符号作为【单页面】跳转技术，上面两个路由访问时路径格式为

  • http://localhost:7070/#/a1

  • http://localhost:7070/#/a2

• 每个路由都有两个必须属性

  • path：路径

  • component：组件

• createRouter 用来创建 router 对象，作为默认导出

需要在 main.ts 中导入 router 对象：

// ...
import A5 from './views/A5.vue'  // vue-router
import router from './router/a5router'
createApp(A5).use(antdv).use(router).mount('#app')

A5 是根组件，不必在 router 中定义，但需要在其中定义 router-view，用来控制路由跳转后，A51、A52 这些组件的显示位置，内容如下

<template>
  <div class="a5">
    <router-view></router-view>
  </div>
</template>

/路径​​​​​​显示如下:

/a1路径显示如下

/a2路径显示如下：

​

动态导入

import {createRouter, createWebHashHistory} from 'vue-router'
import A51 from '../views/A51.vue'
import A52 from '../views/A52.vue'
const routes = [
  // ...
  {
    path: '/a3',
    component: () => import('../views/A53.vue')
  }
]

• 用 import 关键字导入，效果是打包时会将组件的 js 代码都打包成一个大的 js 文件，如果组件非常多，会影响页面加载速度

• 而 import 函数导入（动态导入），则是按需加载，即

  • 当路由跳转到 /a3 路径时，才会去加载 A53 组件对应的 js 代码

  • vue-router 官方推荐采用动态导入

嵌套路由

如果希望再嵌套更深层次的路由跳转，例如：希望在 A53 组件内再进行路由跳转

首先，修改 A53.vue

<template>
  <div class="a53">
    <router-view></router-view>
  </div>
</template>

其次，再修改 /src/router/a5router.ts 文件 内容

import {createRouter, createWebHashHistory} from 'vue-router'
import A51 from '../views/A51.vue'
import A52 from '../views/A52.vue'
const routes = [
  // ...
  {
    path: '/a3',
    component: () => import('../views/A53.vue'),
    children: [
      {
        path: 'student',
        component: () => import('../views/A531.vue')
      },
      {
        path: 'teacher',
        component: () => import('../views/A532.vue')
      }
    ]
  }
]

// ...

将来访问 /a3/student 时，效果为

​

访问 /a3/teacher 时，效果为

​

重定向

用法1

import {createRouter, createWebHashHistory} from 'vue-router'
import A51 from '../views/A51.vue'
import A52 from '../views/A52.vue'
const routes = [
  // ...
  {
    path: '/a3',
    component: () => import('../views/A53.vue'),
    redirect: '/a3/student', // 重定向到另外路径
    children: [
      {
        path: 'student',
        component: () => import('../views/A531.vue')
      },
      {
        path: 'teacher',
        component: () => import('../views/A532.vue')
      }
    ]
  }
]
// ...

效果是，页面输入 /a3，紧接着会重定向跳转到 /a3/student

用法2

import {createRouter, createWebHashHistory} from 'vue-router'
import A51 from '../views/A51.vue'
import A52 from '../views/A52.vue'
const routes = [
  {
    path: '/a1',
    component: A51
  },
  {
    path: '/a2', 
    component: A52
  },
  // ...
  {
    path: '/:pathMatcher(.*)*', // 可以匹配剩余的路径
    redirect: '/a2'
  }
]
// ...

效果是，当页面输入一个不存在路径 /aaa 时，会被 path: '/:pathMatcher(.*)*' 匹配到，然后重定向跳转到 A52 组件去