一文详解:Vue3中使用Vue Router

一文详解:Vue3中使用Vue Router


Vue Router是一个官方的Vue.js路由管理器,它与 Vue.js 核心深度集成,通过它可以轻松地为单页应用程序(SPA)提供路由管理和导航功能。今天我们就来聊一聊Vue 3中使用Vue Router的那些事儿。

安装和配置Vue Router

安装Vue Router

安装Vue Router只需要在vue项目中打开终端,输入如下命令即可安装:

npm 方式安装

npm install vue-router@4

yarn方式安装

yarn add vue-router@4

配置Vue Router

为了便于我们后面代码维护和管理,我们一般将路由相关的代码统一放到一个文件夹中。因此,配置Vue Router的步骤如下:

  1. 在src文件夹新建一个router文件夹,在该文件夹下新建index.js文件
  2. 在index.js中引入vue-router中的createRouter 和 createWebHashHistory 方法,引入页面文件
import { createRouter,createWebHashHistory } from "vue-router";
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import List from '../views/List.vue'
import Detail from '../views/Detail.vue'
  1. 在index.js中定义一个routes数组,在里面定义路由规则
const routes = [
  {
    path:'/home',
    name:Home,
    ***ponent:Home
  },
  {
    path:'/about',
    ***ponent:About
  },
  {
    path:'/list',
    ***ponent:List
  },
  {
    path:'/detail',
    ***ponent:Detail
  },
  {
    path:'/',
    redirect:'/home'
  }
]
  1. 在index.js中使用createRouter创建路由实例,并配置路由模式和上面定义的路由规则
const router = createRouter({
  history:createWebHashHistory(),
  routes
})
  1. 在index.js的最后,使用export default 将上面创建的路由实例导出
export default router
  1. 注册路由:在main.js中导入上面创建的路由文件,并使用app.use注册路由
import router from './router'
const app = createApp(App)
app.use(router) //注册路由
app.mount('#app')
  1. 在组件中使用路由组件
    在App.vue中使用<router-view>组件来渲染要显示的组件,在Tabbar组件中使用<router-link>组件生成链接

App.vue组件中代码

<template>
  <Title></Title>
  <router-view></router-view>
  <Tabbar></Tabbar>
</template>
<script setup>
import Tabbar from './***ponents/Tabbar.vue'; 
import Title from './***ponents/Title.vue'; 

</script>
<style scoped>
</style>

Tabbar组件中代码

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/about">About</router-link>
  </div>
  
</template>
<script setup>
</script>
<style  scoped>
div {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
</style>

至此,我们就完成了路由的配置与搭建,运行程序,刷新浏览器,可以看到页面已经可以正常跳转,实现了路由功能。

虽然上面我们已经实现了一个完整的路由场景搭建,但是我们还是要对Vue Router的基础知识进行深入的了解,方便我们更好的理解和使用Vue Router。下面对Vue Router中的一些基本概念进行介绍。

Vue Router的基本概念

  1. 路由器:Vue Router 提供了一个路由器,用于管理应用程序中的路由。Vue Router 实例化一个 Vue Router 对象,注册路由规则,并以它为中心连接其他组件。

  2. 路由:路由是分发到不同组件的 URL 地址。在 Vue Router 中,路由通常是由 path 规则和相应的组件定义的。当浏览器的 URL 匹配到路由的 path 后,相应的组件将会被加载到页面中。路由的信息可以从 route 对象中获取。

  3. 路由规则:路由规则是由 path、***ponent、name、meta、props 等属性组成的。其中,path 表示 URL 的路径,***ponent 表示要渲染的组件,name 表示路由名称,meta 表示路由的元数据,props 表示路由 props 数据。路由规则可以注册到 Vue Router 中。

  4. 导航守卫:导航守卫是在路由跳转时执行的钩子函数,用于控制路由的访问权限、处理路由跳转前后的逻辑等。在 Vue Router 中,对于选项式 API,常用的导航守卫有 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 等;对于使用组合 API 和 setup 函数来编写组件的,可以通过 onBeforeRouteUpdate 和 onBeforeRouteLeave 分别添加 update 和 leave 守卫。

Vue Router 的配置项介绍

我们在使用Vue Router 中的createRouter创建router对象时,其为我们提供了很多配置项,带完整配置项的示例代码如下:

const router = createRouter({
  history: createWebHashHistory(),
  routes: [],
  scrollBehavior: () => ({ top: 0, left: 0 }),
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  parseQuery: null,
  stringifyQuery: null,
  fallback: true
})

上面代码中各个配置项的含义如下:

  1. history:指定路由的 history 模式,目前支持 createWebHistory()createWebHashHistory()模式。

  2. routes:定义路由规则的数组,每一个路由规则都是一个对象,包含 pathname***ponentmeta 等属性。

  3. scrollBehavior:指定路由切换时滚动行为的配置函数。该函数返回一个包含 xy 属性的对象,表示页面跳转后滚动的位置。

  4. linkActiveClass:指定激活状态的链接的 class 名称,默认为 'router-link-active'

  5. linkExactActiveClass:指定精确匹配的激活状态的链接的 class 名称,默认为 'router-link-exact-active'

  6. parseQuerystringifyQuery:用于配置路由的查询参数解析和序列化函数。通常情况下,我们不需要额外配置这两个函数,因为 Vue Router 已经提供了默认的实现。

  7. fallback:用于配置是否开启 HTML5 History 模式的回退机制。默认值为 true,表示当路由不匹配时,将自动回退到历史记录中的上一个路由。

上面的配置项中,我们一般只需要配置history和routes两个选项就可以了,其它选项了解即可

routes中的配置项介绍

在 Vue Router 中,路由规则的配置是通过 routes 属性来实现的。routes 属性中常用的配置如下:

  1. name:路由规则的名字。可以用于编程式导航和组件内部的路由跳转。

  2. path:路由的路径,可以包含动态参数和正则表达式。例如,/user/:id 表示用户页面,:id 是一个动态参数。

  3. redirect:路由的重定向规则。例如,{ path: '/', redirect: '/home' } 表示路由根路径的重定向。

  4. ***ponent:路由对应的组件。可以是一个普通的组件类或异步加载的组件。

  5. children:当前路由的子路由。可以是一个路由规则数组,也可以是一个函数,动态生成路由规则。

  6. meta:路由的元信息,用于描述路由的一些额外信息。例如,路由是否需要登录、权限鉴定等。

  7. ***ponents:路由对应的多个命名视图组件。

路由跳转

通过Vue Router,我们可以通过router-link组件的to方法和使用router.push函数以编程方式两种方法导航到路由。

使用 router-link组件

使用router-link组件实现路由跳转,我们只需要将菜单按钮使用router-link组件包裹,并在上面使用to方法即可进行跳转,示例代码如下:

<div>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/about">About</router-link>
</div>

使用router.push函数

使用router.push函数以编程方式实现路由跳转,我们只需要在普通按钮上绑定click事件,并在事件中调用router.push()方法即可实现跳转,示例代码如下:

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/list">List</router-link>
    <router-link to="/about">About</router-link>
    <button @click="gotoAbout"> 关于 </button>
  </div>
  
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const gotoAbout = () => {
  router.push('/about')
}
</script>

使用 router.push 方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。

事实上,当我们点击 <router-link> 时,Vue Router 内部会调用这个方法,所以点击 <router-link :to="..."> 相当于调用 router.push(...)

router.push()方法中的参数可以是一个字符串路径,或者一个描述地址的对象。

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })

路由传参

在Vue Router中,可以通过以下方式进行路由传参和获取参数

  1. 通过路由路径传递参数:在路由配置中使用动态路由匹配(Dynamic Route Matching),例如:
const routes= [
    {
      path: '/detail/:id',
      name: 'Detail',
      ***ponent: Detail
    }
  ]

在路由路径中使用冒号表示参数,参数值会被放入route.params对象中。我们可以通过调用route.params获取参数,如访问地址为/detail/123,则我们可以通过route.params.id获取值为"123"。

  1. 通过query参数传递参数:在路由跳转时使用query参数,例如:
// 在组件中跳转
router.push({
  path: '/detail',
  query: { id: 123 }
})

// 在模板中跳转
<router-link to="/detail?id=123">Detail</router-link>

在路由中使用query参数时,参数值会被放入route.query对象中。我们可以通过route.query获取参数。例如,访问地址为/detail?id=123,则我们可以通过route.query.id获取值为"123"。

  1. 在路由配置中通过props选项传递参数。例如:
const routes= [
    {
      path: '/detail/:id',
      name: 'Detail',
      ***ponent: Detail,
      props: { id: 123 }
    }
  ]

在组件中可以直接使用props接收参数

  1. 在路由配置中通过meta选项传递参数。例如:
const routes= [
    {
      path: '/detail/:id',
      name: 'Detail',
      ***ponent: Detail,
      meta: { id: 123 }
    }
  ]

在组件中可以通过route.meta获取参数,

动态路由

动态路由是指将一个路由的一部分作为参数来构建的路由。例如,如果我们要为每个用户创建一个单独的页面,我们可以使用动态路由,创建一个路径为/users/:userId的路由,其中:userId是一个参数。

动态路由在定义路由时使用冒号(:)来表示参数。定义动态路由需要使用path方式定义。例如,要定义一个动态路由,我们可以这样写:

{
  path: '/users/:userId',
  name: 'user',
  ***ponent: User
}

在上面的代码中,路径中的:userId表示一个参数,它可以从路由对象的params属性中获取。在组件中可以这样读取userId

console.log(route.params.userId)

在使用动态路由时,Vue Router还支持使用可选的参数和正则表达式来定义路由。例如,可以这样定义一个包含可选参数的动态路由:

{
  path: '/users/:userId/:postId?',
  name: 'post',
  ***ponent: Post
}

在上面的代码中,路径中的postId参数是可选的,我们在它后面加一个问号代表可选参数。现在,如果路径是/users/123,那么postId将是undefined;如果路径是/users/123/456,那么postId将是456

嵌套路由

嵌套路由允许我们在一个父级路由下嵌套多个子路由,从而形成更加复杂的页面结构。

要定义嵌套路由,我们可以在父级路由的routes数组中定义一个子路由对象数组,每个子路由对象都包含一个path和一个***ponent属性,表示当前子路由的访问路径和对应的组件。同时,我们还可以在子路由对象中定义子路由的子路由,从而形成嵌套的路由结构。

我们使用配置项children表示路由的嵌套关系,如下示例代码:

const routes = [
    {
      path: '/',
      ***ponent: Home,
      children: [
        {
          path: 'about',
          ***ponent: About
        },
        {
          path: 'contact',
          ***ponent: Contact
        }
      ]
    }
  ]

在上面的代码中,我们定义了一个名为Home的组件作为父级路由的组件,并在children数组中定义了两个子路由:AboutContact。这样,当用户访问/about/contact时,Vue Router 就会渲染对应的子组件,并将其嵌套在Home组件内。

命名路由

命名路由可以为路由设置一个名称,以便在代码中进行引用和跳转。使用命名路由可以让代码更加清晰易懂,尤其是在需要跳转到具有动态参数的路由时。

要定义命名路由,我们可以在路由对象中使用name属性来指定路由的名称,例如:

const routes = [
    {
      path: '/',
      name: 'home',
      ***ponent: Home
    },
    {
      path: '/about',
      name: 'about',
      ***ponent: About
    },
    {
      path: '/user/:id',
      name: 'user',
      ***ponent: User
    }
  ]

在上面的代码中,我们为三个路由分别指定了名称:homeaboutuser。然后,在代码中,我们可以通过这些名称来生成对应的路由链接或路由跳转,例如:

<router-link :to="{name: 'home'}">Home</router-link>

<router-link :to="{name: 'about'}">About</router-link>

<router-link :to="{name: 'user', params: {id: '123'}}">User 123</router-link>

router.push({name: 'home'})

router.push({name: 'user', params: {id: '456'}})

在上面的代码中,我们分别使用了<router-link>组件和router.push()方法来跳转到具有命名路由的路由。其中,使用params属性可以动态指定路由中的参数。

命名路由在需要动态传递参数的情况下使用非常方便。

路由守卫

路由守卫是一种函数,在路由的各个阶段被调用,可以用于拦截路由的访问或对路由进行一些操作。我们可以使用路由守卫来控制路由的跳转和访问权限。

在路由守卫中,我们通常会用到三个参数:tofromnext

  • to:表示即将要跳转的目标路由对象,包含路由的路径、参数和查询字符串等信息。

  • from:表示当前路由对象,即正在离开的路由对象。

  • next:是一个函数,用于进行路由控制和跳转。当调用next函数时,路由会继续向下执行。我们可以通过next函数来控制路由的行为,例如渲染组件、跳转路由、取消操作等。

几种使用next函数的情况

  • next(): 表示继续执行下一个路由守卫。

  • next(false): 表示取消当前的路由跳转。

  • next('/path'): 表示跳转到指定的路由路径。

  • next(error): 表示在路由跳转过程中发生了错误,例如权限不足等。

需要注意的是,在使用路由守卫时,我们需要显式地调用next函数来控制路由的跳转和功能,否则路由不会继续向下执行。在不同的守卫中,next函数的行为和功能也会有所不同,需要根据具体的场景进行调用。

Vue Router中的路由守卫分为全局路由守卫和路由独享守卫:

全局路由守卫

全局路由守卫是在整个应用中都生效的守卫,可以用于拦截所有的路由操作。在Vue Router@4中,全局守卫有三个:beforeEachbeforeResolveafterEach

  • beforeEach: 在路由跳转之前执行,可以用于进行全局的访问控制或重定向跳转等操作。

  • beforeResolve: 在路由跳转完成前执行,可以用于等待异步路由组件加载完成或在路由跳转前进行一些操作。

  • afterEach: 在路由跳转完成后执行,可以用于对页面进行一些操作,例如监测页面埋点或修改页面标题等。

一个验证用户是否登录的路由守卫示例代码如下

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

上面代码中,如果用户没有登录,则页面跳转到Login页面,如果已经登录,则执行next()跳转

路由独享守卫

路由独享守卫仅对当前路由生效,可以用于限制或增强某个路由的访问权限。在Vue Router@4中,路由独享守卫有两个:beforeEnterleaveGuard

  • beforeEnter: 在进入当前路由之前执行,可以用于增强当前路由的访问权限或进行相关操作。

  • leaveGuard: 在离开当前路由之前执行,可以用于给用户提示或进行相关操作。

使用路由守卫时,我们可以在createRouter函数中进行注册,例如:

const routes=[
    {
      path: '/',
      ***ponent: Home
    },
    {
      path: '/about',
      ***ponent: About,
      beforeEnter: (to, from, next) => {
        // 进行路由访问控制或相关操作
      }
    }
  ]

路由懒加载

路由懒加载是一种将路由组件按需异步加载的方式,只有当路由对应的组件需要使用时,才会动态地加载该组件对应的代码。使用路由懒加载可以优化应用程序的性能

在Vue Router中使用路由懒加载,我们可以通过使用import()和动态import()两种方式来实现

使用import()方式实现懒加载

const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')
const routes = [
	{
      path: '/',
      ***ponent: Home
    },
    {
      path: '/about',
      ***ponent: About
    }
 ]
const router = createRouter({
  history: createWebHistory(),
  routes
})

使用动态import()方式实现懒加载

const routes = [
    {
      path: '/',
      ***ponent: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      ***ponent: () => import('./views/About.vue')
    }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

使用Vue Router的注意事项

  1. 动态参数不能有斜杆:当使用动态参数时,请注意URL不能和动态参数相同。

  2. 导航流程:路由类似于栈,每次路由的跳转都会被历史纪录中的历史记录所记录。如果你跳转到相同的路由,那么,历史记录中的最后几次都会被忽略。默认情况下,新跳转的路由不会触发路由更新流程,你需要显式地使用router.push或者router.replace方法来更新到当前路由。

  3. 导航被取消:如果你在beforeRouteLeavebeforeRouteUpdate守卫中执行了异步操作,则必须确保该异步操作已经完成并调用了next(true)以确保导航可以进行。

OK,关于vue3中使用Vue Router的相关内容就聊到这里,有问题的小伙伴评论区留言,喜欢的小伙伴点赞关注加收藏哦!!

转载请说明出处内容投诉
CSS教程_站长资源网 » 一文详解:Vue3中使用Vue Router

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买