三、vue3.0之路由(vue-router)配置及语法

本文对比了Vue2.0与Vue3.0中vue-router的区别,并详细介绍了Vue3.0的路由配置,包括引入方式、创建实例、路由跳转。接着,文章阐述了Vue3.0的路由表配置、路由出口、注入项目的方法,以及页面跳转、传参和接参的实现。最后提到了路由守卫的前置守卫beforeEach,虽然重定向和路由守卫保持不变。
摘要由CSDN通过智能技术生成

我们今天来看一下vue3.0的路由(vue-router),在看vue3.0路由之前,我们先来和vue2.0的路由做个对比,看看现在两者之间的区别。

1、从引入来说:

vue2.0 ,通过vue-router直接引入vueRouter

import VueRouter from "vue-router";

vue3.0, 通过vue-router引入createRouter, createwebHashHistory | createWebHistory

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

2创建实例:

vue2.0,直接创建vueRouter实例

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

vue3.0,调用createRouter方法

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

3从路由跳转

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

arguments_zd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值