1 路由基础

2 路有树的配置

3 路由的使用

3.1 路由渲染

3.2 使用

useRoute函数

import { useRoute } from 'vue-router'
// setup 中定义变量来获取当前路由
const route = useRoute()
route.name //路由名称
route.params.id //路由参数

return {
    route //return给template中使用
}

useRouter函数

import { useRouter } from 'vue-router'
const router = useRouter()
// 跳转首页
router.push({
    name: 'home',
    // 带参数的跳转
    params: { id: 123, },
})
router.back() //返回上一页

router-link标签跳转 全局组件

<template>
    // 等价于router.push
    <router-link to="/home">首页</router-link>
</template>

// 可以写个<div>标签绑定click事件达到跳转的效果
<template>
  <div
    class="link"
    @click="
      router.push({
        name: 'home',
        // 带参数的跳转
        params: { id: 123, },
      })
    "
  >
    <span>首页</span>
  </div>
</template>

3.3 路由元信息配置

适用场景

1. 每个路由独立标题
2. 页面访问权限控制
3. 自动生成侧边栏、面包屑
4. 生命周期缓存（keep Alive）
5. ……

const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@views/login.vue'),
    meta: {
      title: '登录',
      isDisableBreadcrumbLink: true,
      isShowBreadcrumb: false,
      addToSidebar: false,
      sidebarIcon: '',
      sidebarIconAlt: '',
      isNoLogin: true,
    },
  },
]

3.4 路由重定向