vue3学习笔记之router(router4 ts)

文章目录

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

Vue Router

Vue Router 官方文档

安装

npm install vue-router@4

yarn add vue-router@4

1. 基本使用

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



const routes: ArrayRouteRecordRaw> = [{
    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'),
}]
 

 
const router = createRouter({
    history: createWebHistory(),
    routes
})
 

export default router

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>  
  router-link to="/a">Arouter-link>
  
  a href="/b">Ba>
  router-link :to="{name:'c'}">Crouter-link>  
  hr class="mtb20" />
  router-view>router-view>
template>

2.2 编程式导航

import { useRouter } from 'vue-router';

const router = useRouter()
const goTo = () => {
  
  
  
  router.push({path: '/b'})
}

2.3 replace

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

router-link

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

编程式导航

router.replace({path: '/b'})

横跨历史

router.go(1)

router.back()

3. 路由传参

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

4. 嵌套路由

const routes: ArrayRouteRecordRaw> = [{
  path: '/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">Arouter-link>	
  router-link to="/index/b">Brouter-link>
  router-link to="/index/c">Crouter-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: ArrayRouteRecordRaw> = [{
  path: '/index',
  name: 'Index',
  component: () => import('@/views/index.vue'),
  meta: {
    title: '首页',
  },
  children: [
    {
      path: '',
      name: 'A',
      component: A,
    }, {
      path: 'b',
      name: 'B',
      
      components: {
        default: B, 
        ccc: C  
      },
    }, {
      path: 'c',
      name: 'C',
      components: {
        default: A,
        B,  
        C
      },
    }]
}]

...
router-view>router-view>	
router-view name="ccc">router-view>	
router-view name="B">router-view>
router-view name="C">router-view>

6. 重定向和别名

6.1 重定向

const routes: ArrayRouteRecordRaw> = [{
  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,
    }]
}]

写法

const routes = [{ path: '/index', redirect: '/index/b' }]


const routes = [{ path: '/index', redirect: { name: 'B' } }]


const routes = [
  {
    
    path: '/index',
    redirect: to => {
      console.log('to :>>', to);
      return {
        name: 'B',
        query: {
          a: 1,
          b: '小多'
        },
      }
    },
  },
]

6.2 别名

const routes = [{ path: '/', component: Homepage, alias: '/root' }]


const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      
      
      
      
      { 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) => {
  
  
  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 = refHTMLElement>()
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 属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据

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

const routes: ArrayRouteRecordRaw>  = [{ 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 })


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());
}