Vue3使用vue-router路由管理工具

小半 • 2023年8月11日下午3:54 • 微信精选 • 阅读 339

❝

vue-router是我们在vue项目中经常使用的路由工具，主要用于路由跳转、路由守卫等操作。

这里主要介绍一下vue-router在Vue3中的使用，版本是4.0X并且是Vite环境下

❞

安装

使用npm进行安装

npm install vue-router@4 --sava

基本使用

新建router

在src目录下新建一个router文件夹并在router目录下新建一个index.js

// src/router/index.js

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

// history 是history 模式 即路由是 域名/a 这里采用
// history 是hash 模式 即路由是 域名/#/a
// import.meta.env.BASE_URL 是模块的基本URL 未配置则为 /
// routes 则为包含路由信息的数组构成

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

main.js 导入


import { createApp } from 'vue'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

渲染内容

RouterView 是 Vue Router 提供的一个组件，用于根据当前路由状态动态渲染匹配到的组件内容，从而实现单页面应用中不同页面的切换。

<template>
  <div>
    <h1>My App</h1>
    <router-view></router-view> <!-- 这里会根据路由匹配渲染不同的组件 -->
  </div>
</template>

常用对象

在vue3中没有this，所以我们没办法像下面这样使用

// 路由器实例 用于在 Vue 组件中进行路由导航操作
this.$router
// 如跳转到不同的路由、在路由之间切换等
this.$router.push()
this.$router.replace()
this.$router.go()


// 当前路由信息对象 包含了当前页面的路由相关信息
this.$route
// 可使用以下获取路径、参数、查询参数、哈希等
this.$route.path
this.$route.params
this.$route.query

但是，给我们提供了其他方法以供使用

在模版中我们依旧可以使用router


<!-- 选项式 -->
<script>
import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    // 路由器实例
    const router = useRouter()
    // 当前路由信息对象
    const route = useRoute()

    // 示例
    router.push('/home')
    const path = route.path
    
  },
}
</script>

<!-- 组合式 -->
<script setup>
import { useRouter, useRoute } from 'vue-router'

// 路由器实例
const router = useRouter()
// 当前路由信息对象
const route = useRoute()

// 示例
router.push('/home')
const path = route.path
</script>