Vue3学习日记 Day5 —— Router4路由解析

vue-router4路由解析

1、与router3相比的变化

1.1、不再一次性导入,而是按需导入

1.2、创建路由实例的方式修改为了 createRouter

1.3、路由模式设置由mode改为了history

history模式使用 createWebHistory()

hash模式使用 createWebHashHistory()

参数:

代表所访问路径的前缀

默认给出的import.meta.env.BASE_URL意味着导入了vite.config.js中的base项所给的地址

2、页面切换方式

2.1、template中

可以直接通过$router.push('路由路径')进行跳转

2.2、script中

注:在script中,不可以再通过this.$router来获取路由方法,需要通过方法来获取

2.2.1、useRouter()

需要先从vue-router中导入,用于获取路由对象

2.2.2、useRoute()

需要先从vue-router中导入,用于获取路由信息

2.3、如:

<script setup>

import { useRoute, useRouter } from 'vue-router'

const Router = useRouter()

const Route = useRoute()

const index = () => {

Router.push('/主页')

console.log(Router)

console.log(Route)

}

</script>

<template>

<div class="app">APP</div>

<button @click="$router.push('/谷歌')">谷歌</button>

<button @click="index">主页</button>

</template>

相关推荐
jjw_zyfx几秒前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
晓数15 分钟前
【硬核干货】JetBrains AI Assistant 干货笔记
人工智能·笔记·jetbrains·ai assistant
我的golang之路果然有问题32 分钟前
速成GO访问sql,个人笔记
经验分享·笔记·后端·sql·golang·go·database
lwewan34 分钟前
26考研——存储系统(3)
c语言·笔记·考研
Mikey_n36 分钟前
前台调用接口的方式及速率对比
前端
周之鸥42 分钟前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉1 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导1 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
前端snow1 小时前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
搞机小能手1 小时前
六个能够白嫖学习资料的网站
笔记·学习·分类