vue3学习笔记之router(router4 + ts)

Vue Router

Vue Router 官方文档

安装

# npm
npm install vue-router@4
# yarn
yarn add vue-router@4

1. 基本使用

//引入路由对象
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
// 路由类型 RouteRecordRaw
// 定义一些路由
// 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [{
    path: '/',
    name: 'index',
    component: () => import('@/views/index.vue'),  /* 路由懒加载 */
}, {
  path: '/a',
  name: 'a',
  component: () => import('@/components/A.vue'),
}, {
  path: '/b',
  name: 'b',
  component: () => import('@/components/B.vue'),
}, {
  path: '/c',
  name: 'c',
  component: () => import('@/components/C.vue'),
}]
 
/* 路由模式 
  createWebHistory: h5
  createWebHashHistory: HASH
  createMemoryHistory: 服务端渲染时
*/
 
const router = createRouter({
    history: createWebHistory(),
    routes
})
 
//导出router
export default router

// mian.ts
import { createApp } from 'vue'
import router from '@/router/index'

const app = createApp()
app.use(router)

app.mount('#app')

router-view

<template> 
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</template>

2. 路由跳转

2.1 router-link

router-link 和 a标签 的区别：

• router-link 跳转不会刷新页面，a标签 跳转会刷新页面

<template>
  <router-link to="/">首页</router-link>  <!-- 通过path跳转 -->
  <router-link to="/a">A</router-link>
  <!-- <router-link to="/b">B</router-link> -->
  <a href="/b">B</a>
  <router-link :to="{name: 'c'}">C</router-link>  <!-- 通过name跳转 -->
  <hr class="mtb20" />
  <router-view></router-view>
</template>

2.2 编程式导航

import { useRouter } from 'vue-router';

const router = useRouter()
const goTo = () => {
  // 1. 字符串：参数为path router.push('/a')
  // 2. 对象模式：方便传参  router.push({name: 'a'}) 或 router.push({path: '/a'})
  // router.push({name: 'a'})
  router.push({path: '/b'})
}

2.3 replace

采用replace进行页面的跳转会同样也会创建渲染新的Vue组件，但是在history中其不会重复保存记录，而是替换原有的vue组件；

router-link

<router-link replace to="/">首页</router-link> 

编程式导航

// router.push() 替换为 router.replace()
router.replace({path: '/b'})

横跨历史

// 前进，数量可变
router.go(1)
// 后退
router.back()

3. 路由传参

详情请见：vue3的路由传参query、params以及动态路由传参

4. 嵌套路由

const routes: Array<RouteRecordRaw> = [{
  path: '/index',
  // redirect: '/index',
  name: 'Index',
  component: () => import('@/views/index.vue'),
  meta: {
    title: '首页',
  },
  children: [
    {
      path: '', /* 为空时默认显示 */
      name: 'A',
      component: () => import('@/components/A.vue'),
    }, {
      path: 'b',  /* 注意子路由不要使用 / */
      name: 'B',
      component: () => import('@/components/B.vue'),
    }, {
      path: 'c',
      name: 'C',
      component: () => import('@/components/C.vue'),
    }]
}]

注意，以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL。

<template>
  <h2>父路由</h2>
  <router-link to="/index">A</router-link>	<!-- 需要拼接上父路由 -->
  <router-link to="/index/b">B</router-link>
  <router-link to="/index/c">C</router-link>
  <hr class="mtb20">
  <router-view></router-view>
</template>

5. 命令视图

运用场景：想同时 (同级) 展示多个视图，而不是嵌套展示

const A = () => import('@/components/A.vue')
const B = () => import('@/components/B.vue')
const C = () => import('@/components/C.vue')

const routes: Array<RouteRecordRaw> = [{
  path: '/index',
  name: 'Index',
  component: () => import('@/views/index.vue'),
  meta: {
    title: '首页',
  },
  children: [
    {
      path: '',
      name: 'A',
      component: A,
    }, {
      path: 'b',
      name: 'B',
      // 渲染多个组件加个s component ---> components
      components: {
        default: B, /* 默认 router-view */
        ccc: C  /* <router-view name="ccc"> */
      },
    }, {
      path: 'c',
      name: 'C',
      components: {
        default: A,
        B,  /* B: B 的简写 */
        C
      },
    }]
}]

...
<router-view></router-view>	<!-- 渲染默认的 -->
<router-view name="ccc"></router-view>	<!-- 渲染C组件 -->
<router-view name="B"></router-view>
<router-view name="C"></router-view>

6. 重定向和别名

6.1 重定向

const routes: Array<RouteRecordRaw> = [{
  path: '/index',
  component: () => import('@/views/index.vue'),
  redirect: '/index/b',
  children: [
    {
      path: 'a',
      name: 'A',
      component: A,
    }, {
      path: 'b',
      name: 'B',
      component: B,
    }, {
      path: 'c',
      name: 'C',
      component: C,
    }]
}]

写法

// 1. 字符串
const routes = [{ path: '/index', redirect: '/index/b' }]

// 2. 对象	redirect: { name: 'B' } 或者 redirect: { path: '/index/b' }
const routes = [{ path: '/index', redirect: { name: 'B' } }]

// 3. 函数 可以传递参数
const routes = [
  {
    // /index-> /index/b?a=1&b=小多
    path: '/index',
    redirect: to => {
      console.log('to :>> ', to);
      return {
        name: 'B',
        query: {
          a: 1,
          b: '小多'
        },
      }
    },
  },
]

6.2 别名

// 1. 字符串
const routes = [{ path: '/', component: Homepage, alias: '/root' }]

// 2. 数组
const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      // 为这 3 个 URL 呈现 UserDetails
      // - /users/24
      // - /users/24/profile
      // - /24
      { path: 'profile', component: UserDetails, alias: ['/:id', ''] },
    ],
  },
]

7. 路由守卫

7.1 全局前置守卫

每个守卫方法接收两个参数：

• to: 即将要进入的目标 用一种标准化的方式
• from: 当前导航正要离开的路由 用一种标准化的方式

可以返回的值如下:

• false: 取消当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
• 一个路由地址: 通过一个路由地址跳转到一个不同的地址，就像你调用 router.push() 一样，你可以设置诸如 replace: true 或 name: 'home' 之类的配置。当前的导航被中断，然后进行一个新的导航，就和 from 一样。

router.beforeEach(async (to, from) => {
  // isAuthenticated：用户是否登录
  // to.name !== 'Login'：避免无限重定向
  if (!isAuthenticated && to.name !== 'Login') {
    return { name: 'Login', replace: true }
  }
})

7.2 全局后置守卫

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

router.afterEach((to, from) => {
  sendToAnalytics(to.fullPath)
})

案例：加载滚动条

loadingBar组件

<template>
  <div class="wraps">
    <div ref="bar" class="bar"></div>
  </div>
</template>

<script setup lang="ts">
const step = ref(1)
const bar = ref<HTMLElement>()
let timer = 0

const loadingStart = () => {
  let dom = bar.value as HTMLElement
  dom.style.display = 'block'
  step.value = 1
  timer = window.requestAnimationFrame(function fn() {
    if (step.value < 90) {
      step.value++
      dom.style.width = step.value + '%'
    } else {
      step.value = 1
      window.cancelAnimationFrame(timer)
    }
  })
}

const loadingEnd = () => {
  let dom = bar.value as HTMLElement
  setTimeout(() => {
    window.requestAnimationFrame(() => {
      step.value = 100
      dom.style.width = step.value + '%'
    })
    setTimeout(() => {
      dom.style.display = 'none'
    }, 500)
  }, 500)
}

defineExpose({
  loadingStart,
  loadingEnd,
})
</script>

<style lang="less" scoped>
@barColor: #4da7f5;
.wraps {
  position: fixed;
  top: 0;
  width: 100%;
  height: 2px;
  .bar {
    width: 0;
    height: inherit;
    background: @barColor;
  }
}
</style>

index.ts

import { createVNode, render } from 'vue'
import LoadingBar from './index.vue'

const Vnode = createVNode(LoadingBar)
render(Vnode, document.body)

export default Vnode

main.ts

import loadingBar from '@/components/loadingBar/index'
...

// 路由前置守卫
router.beforeEach(async (to, from) => {
  loadingBar.component?.exposed?.loadingStart()
})

// 路由后置守卫
router.afterEach((to, from) => {
  loadingBar.component?.exposed?.loadingEnd()
})

更多路由守卫详情请见：Vue-Router 导航守卫

8. 路由元信息

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

// 如果不使用扩展 将会是unknow 类型
declare module 'vue-router' {
  interface RouteMeta {
    title?: string,
    transition?: string
  }
}

const routes: Array<RouteRecordRaw>  = [{ path: '/', component: A, meta: { title: '首页', transition: 'animate__bounce'} }]

router.beforeEach(async (to, from) => {
  to.meta?.title && (document.title = to.meta.title)
  ...
})

9. 路由过渡动效

<router-view v-slot="{ Component, route }">
    <transition :enter-active-class="`animate__animated ${route.meta.transition}`">
      <component :is="Component" />
    </transition>
</router-view>

10. 滚动行为

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

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: (to, from, savePosition) => {
    if (savePosition) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(savePosition)
        }, 1000)
      })
    } else {
      return { left: 0,top: 0 }
    }
  },
  routes
})

11. 动态路由

11.1 添加路由

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

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

// 我们也可以使用 this.$route 或 route = useRoute() （在 setup 中）
router.replace(router.currentRoute.value.fullPath)

记住，如果你需要等待新的路由显示，可以使用 await router.replace()。

11.2 添加嵌套路由

要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数传递给 router.addRoute()，这将有效地添加路由，就像通过 children 添加的一样：

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

// 等效于
router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
}) 

11.3 删除路由

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

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

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

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

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

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

11.4 查看现有路由

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

案例：

注意一个事项vite在使用动态路由的时候无法使用别名 @ 必须使用相对路径

import { useRouter } from 'vue-router'

const router = useRouter()
const result = [
  { name: 'A', path: '/a', component: 'A' },
  { name: 'B', path: '/b', component: 'B' },
  { name: 'C', path: '/c', component: 'C' },
]

const add = () => {
  result.forEach(e => {
    router.addRoute({
      path: e.path,
      name: e.name,
      component: () => import(`./components/${e.component}.vue`)
    })
  })
  console.log(router.getRoutes());
}