学习 Vue Router 三 元信息，过渡功效，滚动行为，动态路由

路由元信息

通过路由记录的 meta 属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据，例如：

• 权限校验标识。
• 路由组件的过渡名称。
• 路由组件持久化缓存 (keep-alive) 的相关配置。
• 标题名称

我们可以在导航守卫或者是路由对象中访问路由的元信息数据。

const routes:Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "login",
        meta: {
            title: "登录"
        },
        component: () => import("../view/Login.vue"),
    },
    {
        path: "/home",
        name: "home",
        meta: {
            title: "首页"
        },
        component: () => import("../view/index.vue"),
    }
]

localStorage.setItem(to.meta.title, to.path)

如果不使用扩展 将会是unknow 类型

会报错

declare module 'vue-router' {
    interface RouteMeta {
        title?: string
    }
}

路由过渡功效

想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 v-slot API：

<router-view #default="{route,Component}">
    <transition :enter-active-class="route.meta.transition">
      <component :is="Component"></component>
    </transition>
  </router-view>

上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，你可以将元信息和动态的 name 结合在一起，放在<transition> 上： 

declare module 'vue-router' {
    interface RouteMeta {
        title?: string,
        transition:string
    }
}

const routes:Array<RouteRecordRaw> = [
    {
        path: "/",
        name: "login",
        meta: {
            title: "登录",
            transition: "animate__animated animate__backInLeft"
        },
        component: () => import("../view/Login.vue"),
    },
    {
        path: "/home",
        name: "home",
        meta: {
            title: "首页",
            transition: "animate__animated animate__backInLeft"
        },
        component: () => import("../view/index.vue"),
    }
]

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 可以自定义路由切换时页面如何滚动。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: (to, from, savePosition) => {
    return {
       top:200
    }
  },

它可以指定滚轮的高度

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

scrollBehavior 返回滚动位置的对象信息，长这样：

{ left: number, top: number }

动态路由

我们一般使用动态路由都是后台会返回一个路由表前端通过调接口拿到后处理(后端处理路由)

主要使用的方法就是router.addRoute

1. 添加路由

动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由

router.addRoute({ path: '/about', component: About })

2. 删除路由

有几个不同的方法来删除现有的路由：

1. 通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径，会先删除路由，再添加路由：

如：

router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })

2. 通过调用 router.addRoute() 返回的回调

const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话

3. 通过使用 router.removeRoute() 按名称删除路由：

router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

如果害怕重名的话，可以采用symbol来命名

当路由被删除时，所有的别名和子路由也会被同时删除

3. 查看现有路由

Vue Router 提供了两个功能来查看现有的路由：

• router.hasRoute()：检查路由是否存在。
• router.getRoutes()：获取一个包含所有路由记录的数组。