Vue3中VueRouter基本用法及与Vue2中路由使用差异解析

Vue Router 在 Vue3 中被重写,使用了 Vue3 的 Composition API。使用上跟Vue2 相比有些不同,需要注意。

首先,让我们来看一下 Vue3 中 VueRouter 的基本使用方法:

  1. 安装 Vue Router:
npm install vue-router@next
  1. 创建一个 router.js 文件,并设置你的路由:
import { createRouter, createWebHistory } from 'vue-router'
import HomeComponent from './components/HomeComponent.vue'
import AboutComponent from './components/AboutComponent.vue'

export const router = createRouter({
  history: createWebHistory(), //注意这里,方式不同
  routes: [
    { path: '/', component: HomeComponent },
    { path: '/about', component: AboutComponent },
  ],
})
  1. 在你的 main.js 文件中安装路由:
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router.js'

//这里,用的是use
createApp(App).use(router).mount('#app')
  1. 现在,你可以在你的组件中使用 <router-link><router-view>
<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

接下来,让我们看一下 Vue3 和 Vue2 在使用VueRouter 时的主要差异:

  • Vue Router 在 Vue3 中被重写,使用了 Vue3 的 Composition API。这意味着你可以在任何组件中使用 useRouteruseRoute 来分别获取 router 实例和当前路由。

  • Vue3 支持异步组件,这意味着你可以在路由配置中直接使用动态 import() 语法来导入组件,无需使用 Vue.component

  • Vue3 中的 <router-link> 不再支持 tag 属性,而是引入了新的 v-slot API 来自定义链接的渲染方式。

  • Vue3 中的 Vue Router 对 Vue2 的 API 进行了一些更改,例如,mode: 'history' 被更改为 history: createWebHistory()base 属性被移动到了 createWebHistory 函数中。

更多细节如动态路由、编程式导航、路由守卫等原理相同,写法略不同,参考:https://router.vuejs.org/zh/introduction.html

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值