路由概述

单独安装路由依赖并引入，比较麻烦，不推荐

1. 安装路由 - 为项目添加安装依赖

npm i vue-router -S

2. 引入路由 - 在入口文件 main.js 中引入路由，作为中间件使用；这里引入后，路由将作为 全局组件，其它组件可以直接使用

//引入
import router from './router'

//使用 - 链式
app.use(router).mount('#app')

创建项目的时候指定使用路由，自动生成路由配置文件

使用路由功能，需要 vue-router 的支持

推荐 创建项目 的时候指定使用路由，自动生成路由配置文件

也可以 单独安装路由依赖；需要单独配置并引入，比较麻烦，不推荐

使用 createRouter() 函数，根据 路由选项 RouterOptions 创建路由实例 Router

历史记录模式

Vue2 使用 mode 配置项，Vue3 使用 history 配置项

需要引入对应的包再使用

1. createWebHistory()

HTML5 模式，URL 不带 #；传统网站模式

需要服务器端配合处理路径，否则容易出现 404；后端运维基本技能

http://localhost:5173/

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    // 
})

2. createWebHashHistory()

hash 模式；推荐模式

URL 带 #，看起来不够美观

SEO 优化性能略微不足

兼容性更好，不需要服务器端配合处理路径；前后端开发比较省心

优秀作品提交，请使用哈希模式

http://localhost:5173/#/

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
    history: createWebHashHistory(import.meta.env.BASE_URL),
    // 
})

按照值对形式 name-value pair 配置路由，即把 URL 路径映射到组件；其中，路径 path 和组件 component 必填

所有的路由配置位于项目 src → router 文件夹中，通常是 index.js

更多路由配置特性，请访问 路由定义和分类

1. 路径 path

{
  path: '/menu',
  component: () => import('@/views/MenuView.vue'),
}

https://localhost:5173/menu?user=glpla.github.io

{
  path: '/details/:id',
  component: () => import('@/views/DetailsView.vue'),
}

https://localhost:5173/details?id=1001

{
  path: '/:pathMatch(.*)*',
  name: 'NotFound',
  component: () => import('../views/NotFound.vue')
}

import {h} from 'vue'

{
  path: '/goods:pathMatch(.*)*',
  name: 'goods-not-found',
  component: h('p', {style: 'color: red'}, 'goods 404 Not Found')
}

2. 组件 component

import TeamView from "@/views/AboutView.vue";

{ 
  path: '/about', 
  component: TeamView,
}

{ 
  path: '/about', 
  component: () => import("@/views/AboutView.vue")
}

3. 命名路由 Name - 使用 name 属性指定路由名称

{
  path: '/center/login',
  component: () => import("@/views/LoginView.vue")
  name: 'login'
}

4. 重定向路由 Redirect

{
  path: '/',
  // redirect: '/home',
  redirect: { name: 'home' },
},
{
  path: '/home',
  name: 'home'
  component: () => import("@/views/HomeView.vue") 
}

5. 嵌套路由 Nested Routes - 使用 children 属性指定子路由

{
  path: "/menu",
  component: () => import("@/views/MenuView.vue"),
  name: "menu",
  children: [
    {
      path: "goods", // 省略父级路由
      component: () => import("@/components/Goods.vue"),
      name: "goods"
    },
    {
      path: "vip", // 省略父级路由
      component: () => import("@/components/Vip.vue"),
      name: "vip"
    },
    {
      path: "/menu/rank", // 可以使用完整路由；建议所有子路由配置保持一致
      component: () => import("@/components/Rank.vue"),
      name: "rank"
    },
    {
      path: "/menu/favorite",
      component: () => import("@/components/Favorite.vue"),
      name: "favorite"
    }
  ]
}

{
  path: "/menu",
  component: () => import("@/views/MenuView.vue"),
  name: "menu",
  children: [
    {
      path: "", //空路由
      component: () => import("@/components/Goods.vue"),
      name: "goods"
    },
    // ...
  ]
}

{
  path: '/menu',
  redirect: { name: "goods" }, // 使用命名路由
  // redirect: '/menu/goods',  // 或使用完整路由
  component: () => import('@/views/MenuView.vue'),
  name: "menu",
  children:[
    {
      path: 'goods',
      component: () => import('@/components/Goods.vue'),
      name: "goods"
    },
    // ...
  ]
}

6. 路由元数据 meta - 指定元信息，方便路由引用，如 导航守卫 时，更新页面标题；显示主导航菜单

{
  path: "/mall",
  name: "mall",
  component: () => import("@/views/MallView.vue"),
  meta: { showNav: true, title: "瑞幸电商" },
},

7. 路由独享的守卫 beforeEnter - 当前路由切换时触发，用以控制访问

8. 路由传参 props - 按照组件传参的形式传递路由参数

除了直接配置路由 routes 外，还可以采用模块化 - 先定义再导入

方案1：普通导出 - 导入和导出需要指定名字

路由文件 routes.js：需要指定类型和名字

export const routes = [
  {
    path: "/",
    name: "home",
    component: () => import("@/views/HomeView.vue"),
  },
  // ...
];

router → index.js：导入时，需解构化并指定名字

import { routes } from "../assets/routes";

方案2：默认导出

路由文件 routes.js：默认导出，不需要指定类型和名字

export default [
  {
    path: "/",
    name: "home",
    component: () => import("@/views/HomeView.vue"),
  },
  // ...
];

router → index.js：导入时必需指定名字

import routes from "../assets/routes";