Vue全家桶二: vue-router路由概述 Vue Router 是 Vue.js 的官方路由。它与 Vue.js

概述

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。事实上，路由器主要维护的是一个映射表, 映射表会决定数据的流向。

vue-router的使用

安装

npm install vue-router

配置路由

在创建 Vue.js 应用程序时，需要配置对应的路由映射关系。通常在 src/router/index.js 文件中进行配置。在routes维护组件映射关系。

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  }
]

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

export default router

应用程序中使用

在使用 Vue Router 库时，需要在项目入口文件 main.js 中导入并使用 router 实例。

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

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

路由细节

设置首次进入页面自动跳转到的路径

{ path: "/", redirect: "/base-page/main" },

路由懒加载(打包时进行分包处理), 开发一般都使用懒加载

component: () => import('@/views/About.vue')

魔法注释: 可注释打包后对应的包名

{
  path: "/v-page",
  component: () => import(/* webpackChunkName: 'v-page' */"../Views/VPage.vue")
},

动态路由

{
  path: "/user/:id",
  component: () => import("../Views/User.vue")
},

若路径路径不匹配, 则切换到该组件

{
  path: "/:pathMatch(.*)",
  component: () => import("../Views/NotFound.vue")
},

路由嵌套

{
  path: "/base-page/:id",
  component: () => import("../Views/BasePage.vue"),
// 子路由
children: [
{
  // path: '' 相当于path: "/base-page/:id"
  // path: '/nesting'  相当于绝对路径,从根目录开始渲染, http://localhost:8080/#/nesting
  path: 'nesting',  //相当于"/base-page/:id/nesting"
  component: () => import("../Views/BasePageNesting.vue")
    }
  ]
},

路由守卫

路由守卫是 Vue Router 提供的一种机制，用于在路由跳转时执行特定的逻辑操作。通过使用路由守卫，我们可以控制路由的跳转行为，例如是否允许进入某个页面、是否需要身份验证等。

跳转前需要判断当前路径是否为目的路由, 若为目的路由则不需要跳转, 否则就会参数 '拦截递归'。参数to:跳转目的路由, from: 跳转初始路由

Vue Router 提供了三种类型的路由守卫

全局前置守卫：在路由跳转前执行，可用于进行身份验证、记录日志、等。
单个路由独享守卫：只对指定的路由生效，可用于处理当前路由的逻辑。
组件内守卫：在组件内部定义的守卫，可用于处理当前组件的逻辑。

需要守卫的组件

import router from './router'

router.beforeEach((to, from, next) => {
  // 判断用户是否已登录
  const isAuthenticated = localStorage.getItem('isAuthenticated')
  if (to.name !== 'Login' && !isAuthenticated) {
    // 如果用户未登录且不是访问登录页，则跳转到登录页
    next({ name: 'Login' })
  } else {
    // 否则继续执行路由跳转
    next()
  }
})