1. 路由的集成和使用

安装：

yarn add vue-router@4

创建 router 目录  
    
    
  ，并在其下面创建 index.js 文件：

// vue-router中提供3种的路由模式 import { createWebHistory, createRouter } from vue-router const routes = [ { path: /, component: () => import(@/views/home.vue), }, { path: /about, component: () => import(@/views/about.vue), } ] const router = createRouter({ // 路由的模式 history: createWebHistory(), // 路由规则 routes }) export default router

在 main.js 文件中引入路由：

// 整个应用支持路由 app.use(router)

在 App 组件中挂载路由：

<template> <router-view /> </template> <script setup></script> <style lang="scss" scoped></style>

2. 声明式导航

<template> <div> <!-- RouterLink它默认编译生成的html标签为 a router@4它没有属性 tag 来指定生成后的html标签 --> <RouterLink active-class="active" to="/">home</RouterLink> -- <!-- vue-router@4版本中如果你要自定义编译后的html标签

     


     


     
，你需要通过插槽来完成 v-slot及 custom 同时使用 --> <RouterLink to="/about" custom v-slot="{ route, navigate, isActive }"> <h3 :class="{ active: isActive }" @click="navigate">about</h3> </RouterLink> <hr> <router-view /> </div> </template> <script setup></script> <style lang="scss" scoped></style>

<router-link> 通过一个作用域插槽暴露底层的定制能力  
    
    
  。这是一个更高阶的 API 




 




 




，主要面向库作者  

   

   

 ，但也可以为开发者提供便利

     

     

     ，大多数情况下用在一个类似 NavLink 这样的组件里

     


     


     
。

注意

记得把 custom 配置传递给 <router-link>  




  




  




，以防止它将内容包裹在 <a> 元素内 




 




 




。

<router-link to="/about" custom v-slot="{ href, route, navigate, isActive, isExactActive }" > <NavLink :active="isActive" :href="href" @click="navigate"> {{ route.fullPath }} </NavLink> </router-link> href：解析后的 URL  

   

   

 。将会作为一个 <a> 元素的 href 属性

     

     

     。如果什么都没提供  


  


  


，则它会包含 base  




  




  




。 route：解析后的规范化的地址  


  


  


。 navigate：触发导航的函数
     
     
     。 会在必要时自动阻止事件
     
     
     ，和 router-link 一样
   




   




   



。例如：ctrl 或者 cmd + 点击仍然会被 navigate 忽略 



 



 



。 isActive：如果需要应用 active class
   




   




   



，则为 true               。允许应用一个任意的 class

    




    




    


。 isExactActive：如果需要应用 exact active class 



 



 



，则为 true














。允许应用一个任意的 class               。

3. 编程式导航

<template> <div> <button @click="goHome">到首页</button> <hr> <router-view /> </div> </template> <script setup> // 在setup中使用hook函数来得到路由对象               ，完成编程式导航 import { useRouter } from vue-router const router = useRouter() const goHome = () => { router.push(/) } </script> <style lang="scss" scoped></style>

4. 获取页面路由参数数据

路由规则表：

// vue-router中提供3种的路由模式 import { createWebHistory, createRouter } from vue-router const routes = [ { path: /, component: () => import(@/views/home.vue), }, { path: /about, component: () => import(@/views/about.vue), }, { // 带有动态路由参数的路由 path: /detail/:id, component: () => import(@/views/detail.vue) } ] const router = createRouter({ // 路由的模式 history: createWebHistory(), // 路由规则 routes }) export default router

4.1 动态路由传参和query传参

home 页面：

<template> <div> <h3>首页页面</h3> <ul> <!-- 通过编程式导航传参 --> <li v-for="item of films" :key="item.filmId"> <!-- 对象方式 query 传参 --> <RouterLink :to="{ path: `/detail/${item.filmId}`, query: { name: lisi } }">{{ item.name }}</RouterLink> <!-- 问号方式 query 传参 --> <!-- <RouterLink :to="`/detail/${item.filmId}?name=zhangsan`">{{ item.name }}</RouterLink> --> </li> </ul> </div> </template> <script setup> import { onMounted, ref } from vue import { useRouter } from vue-router import axios from axios const router = useRouter() const films = ref([]) onMounted(async () => { let ret = await axios.get(/api/v1/getNowPlayingFilmList?cityId=110100&pageNum=1&pageSize=10) films.value = ret.data.data.films }) </script> <style lang="scss" scoped></style>

详情页面：

<template> <div> <h3>详情页面 - {{ id }} - {{ name }}</h3> <button>收藏</button> </div> </template> <script setup> // 获取页面路由中的参数数据 import { useRoute } from vue-router // 通过hook函数获取页面路由中的数据 const route = useRoute() // 获取动态路由参数 const id = route.params.id // 获取query字符串 const name = route.query.name </script> <style lang="scss" scoped></style>

4.2 编程式导航传参

home 页面：

<template> <div> <h3>首页页面</h3> <ul> <!-- 通过编程式导航传参 --> <li v-for="item of films" :key="item.filmId" @click="goDetail(item.filmId)"> {{item.name}} </li> </ul> </div> </template> <script setup> import { onMounted, ref } from vue import { useRouter } from vue-router import axios from axios const router = useRouter() const films = ref([]) onMounted(async () => { let ret = await axios.get(/api/v1/getNowPlayingFilmList?cityId=110100&pageNum=1&pageSize=10) films.value = ret.data.data.films }) const goDetail = id => { router.push(`/detail/${id}?name=zhangs@an`) } </script> <style lang="scss" scoped></style>

详情页面：

<template> <div> <h3>详情页面 - {{ id }} - {{ name }}</h3> <button>收藏</button> </div> </template> <script setup> // 获取页面路由中的参数数据 import { useRoute } from vue-router // 通过hook函数获取页面路由中的数据 const route = useRoute() // 获取动态路由参数 const id = route.params.id // 获取query字符串 const name = route.query.name </script> <style lang="scss" scoped></style>

5. router-view和keepAlive  
    
    
  、transition结合

注意：要用 router-view 包裹 keepAlive

     



     



     

。

<template> <button @click="goHome">到首页</button> <!-- 在vue-router@4版本中,使用keepAlive需要用到插槽 --> <router-view v-slot="{ Component, route }"> <transition appear mode="out-in" name="v"> <keep-alive> <component :is="Component" /> </keep-alive> </transition> </router-view> </template> <script setup> // 在setup中使用hook函数来得到路由对象

    




    




    


，完成编程式导航 import { useRouter } from vue-router const router = useRouter() const goHome = () => { router.push(/) } </script> <style lang="scss" scoped> /* 在进场和退场的过程中














，进行透明度的变化 */ .v-enter-active, .v-leave-active { transition: opacity 0.6s ease; } /* 进场开始和退场的结束 */ .v-enter-from, .v-leave-to { opacity: 0; } </style>

5. 404页面处理

{ // 404定义 path: /:patchMath(.*)*, component: () => import(@/views/nomatch.vue) }