Vue3: Vue-router路由的使用

21,114 阅读7分钟

Router

安装

npm install vue-router -S

创建 router 文件夹,创建 index.ts 文件

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

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    alias: ['/home','/home2'],   // 别名,可以定义很多个
    component: () => import('../views/home.vue'),
    // 重定向
    // redirect: '/welcome',
    redirect: to => {
      console.log(to);
      return {
        path: '/welcome',
        query: {
          name: '欢迎'
        }
      }
    },
    children: [
      {
        path: '/welcome',
        name: 'welcome',
        component: () => import('../views/welcome.vue')    // component: import('../views/reg.vue')
      }
    ]
  },
]

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

export default router

在 main.ts 中引入并注册

import { creatApp } from 'vue'
import App from './App.vue'
import router from './router'
creatApp(App).use(router).mount('#app')

使用 replace 不会记录路由跳转记录,一般都使用 push

import { useRouter } from 'vue-router'
const router = useRouter()
 
 const toPage = (url: string) => {
  router.push(url)
}
 
const toPage1 = (url: string) => {
  router.replace(url)
}

Query路由传参

编程式导航 使用router push 或者 replace 的时候 改为对象形式新增query 必须传入一个对象

const toDetail = (item: Item) => {
    router.push({
        path: '/reg',
        query: item
    })
}

接受参数

使用 useRoute 的 query

import { useRoute } from 'vue-router';
const route = useRoute()
 <div>品牌:{{ route.query?.name }}</div>
 <div>价格:{{ route.query?.price }}</div>

Params 路由传参

编程式导航 使用params传参的时候 改为对象形式并且只能使用name,path无效

const toDetail = (item: Item) => {
    router.push({
        name: 'Reg',
        params: item
    })
}

接受参数

使用 useRoute 的 params

import { useRoute } from 'vue-router';
const route = useRoute()
<div>品牌:{{ route.params?.name }}</div>
<div>价格:{{ route.params?.price }}</div>

动态路由传参

很多时候,我们需要将给定匹配模式的路由映射到同一个组件。例如,我们可能有一个 User 组件,它应该对所有用户进行渲染,但用户 ID 不同。在 Vue Router 中,我们可以在路径中使用一个动态字段来实现,我们称之为 路径参数

路径参数 用冒号 : 表示。当一个路由被匹配时,它的 params 的值将在每个组件

const routes:Array<RouteRecordRaw> = [
    {
        //动态路由参数
        path:"/reg/:id",
        name:"Reg",
        component:()=> import('../components/reg.vue')
    }
]

使用时

const toDetail = (item: Item) => {
    router.push({
        name: 'Reg',
        params: {
            id: item.id
        }
    })
}

二者的区别

  1. query 传参配置的是 path,而 params 传参配置的是name,在 params中配置 path 无效

  2. query 在路由配置不需要设置参数,而 params 必须设置

  3. query 传递的参数会显示在地址栏中

  4. params传参刷新会无效,但是 query 会保存传递过来的值,刷新不变 ;

  5. 路由配置

命名视图

命名视图可以在同一级(同一个组件)中展示更多的路由视图,而不是嵌套显示。 命名视图可以让一个组件中具有多个路由渲染出口,这对于一些特定的布局组件非常有用。 命名视图的概念非常类似于“具名插槽”,并且视图的默认名称也是 default。

一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)

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

const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        components: {
            default: () => import('../components/layout/menu.vue'),
            header: () => import('../components/layout/header.vue'),
            content: () => import('../components/layout/content.vue'),
        }
    },
]

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

export default router

对应Router-view 通过name 对应组件

    <div>
        <router-view></router-view>
        <router-view name="header"></router-view>
        <router-view name="content"></router-view>
    </div>

重定向

重定向 redirect

  1. 字符串形式配置,访问/ 重定向到 /user (地址栏显示/,内容为/user路由的内容)
redirect:'/user1'

2.对象形式配置

 redirect: { path: '/user1' },

3.函数模式(可以传参)

 redirect: (to) => {
    return {
        path: '/user1',
        query: to.query
    }
},

别名 alias

/ 别名为 /root,意味着当用户访问 /root时,URL 仍然是 /user,但会被匹配为用户正在访问 /

alias:["/root","/root2","/root3"],

全局前置守卫

router.beforeEach

router.beforeEach((to, form, next) => {
    console.log(to, form);
    next()
})

每个守卫方法接收三个参数:

to: Route, 即将要进入的目标 路由对象; **from: Route,**当前导航正要离开的路由; next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。 next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。 next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

案例 权限判断

const whileList = ['/']
 
router.beforeEach((to, from, next) => {
    let token = localStorage.getItem('token')
    //白名单 有值 或者登陆过存储了token信息可以跳转 否则就去登录页面
    if (whileList.includes(to.path) || token) {
        next()
    } else {
        next({
            path:'/'
        })
    }
})

全局后置守卫

使用场景可以用来做loadingBar等等

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

router.afterEach((to,from)=>{
    Vnode.component?.exposed?.endLoading()
})

路由元信息

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

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

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

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('@/views/Login.vue'),
      meta: {
        title: "登录"
      }
    },
    {
      path: '/index',
      component: () => import('@/views/Index.vue'),
      meta: {
        title: "首页",
      }
    }
  ]
})

// 使用TS扩展
// 如果不使用扩展 将会是unknow 类型
declare module 'vue-router' {
 interface RouteMeta {
    // 自定义的属性  ?: 代表可选   : 代表每个路由必需声明
    title: string
    transition?: string
  }
}

路由过渡动效

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

router4 的写法里面, router-view 支持插槽 v-solt 简写为 #default, 可以解出两个属性 route 和 Component,

其中 route 是当前路由的信息, Component 是当前的 VNode*

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

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

declare module 'vue-router'{
     interface RouteMeta {
        title:string,
        transition:string,
     }
}
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('@/views/Login.vue'),
      meta:{
         title:"登录页面",
         transition:"animate__fadeInUp",
      }
    },
    {
      path: '/index',
      component: () => import('@/views/Index.vue'),
      meta:{
         title:"首页!!!",
         transition:"animate__bounceIn",
      }
    }
  ]
})

滚动行为

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

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

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: (to, from, savePosition) => {
    console.log(to, '==============>', savePosition);
    return new Promise((r) => {
      setTimeout(() => {
        r({
          top: 10000
        })
      }, 2000);
    })
  },

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

scrollBehavior 返回滚动位置的对象信息,长这样:

{ left: number, top: number }

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

动态路由

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

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

添加路由

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

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

删除路由

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

  • 通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径,会先删除路由,再添加路由:
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')

需要注意的是,如果你想使用这个功能,但又想避免名字的冲突,可以在路由中使用 Symbol 作为名字。

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

查看现有路由

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