首页 前端知识 vue3学习笔记之router(router4 ts)

vue3学习笔记之router(router4 ts)

2024-10-29 11:10:20 前端知识 前端哥 226 491 我要收藏

文章目录

    • Vue Router
      • 1. 基本使用
        • router-view
      • 2. 路由跳转
        • 2.1 router-link
        • 2.2 编程式导航
        • 2.3 replace
      • 3. 路由传参
      • 4. 嵌套路由
      • 5. 命令视图
      • 6. 重定向和别名
        • 6.1 重定向
        • 6.2 别名
      • 7. 路由守卫
        • 7.1 全局前置守卫
        • 7.2 全局后置守卫
          • 案例:加载滚动条
      • 8. 路由元信息
      • 9. 路由过渡动效
      • 10. 滚动行为
      • 11. 动态路由
        • 11.1 添加路由
        • 11.2 添加嵌套路由
        • 11.3 删除路由
        • 11.4 查看现有路由

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-linka标签 的区别:

  • 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: truename: '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());
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19420.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!