九、vue3.0路由配置及跳转

已于 2022-08-15 15:48:25 修改
阅读量4.2k 收藏 15
点赞数 6
分类专栏： vue3.0的开发和学习 文章标签： 前端 javascript vue.js
于 2022-06-20 14:58:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43185384/article/details/125372315
版权

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cmwQRh1b-1621662691381)(2f5fa287f13c4e4a2fa0e8c6e40c875c.png)]

我们做项目一般使用原生js来做，在js中，我们一般会使用window.location.href来进行页面跳转，那么我们在vue项目中，我们该如何进行页面跳转呢 同时在原生js中我们通过使用url地址挂在参数来进行页面跳转，那么我们在框架中如何进行页面跳转。那么接下来我们来看看。

路由：

本质上是一种对应关系，比如我们在url地址上输入我们要访问的地址后，按下回车，浏览器会请求相关资源，那么相关的资源就和我们的url地址就有一种对应关系 这就是路由。

我们前端的路由是通过hash(锚点链接进行的页面跳转)，根据不同的事件我们来显示不同的内容，即事件和事件处理函数是相对应的关系。

路由模式：

        路由模式主要分为：hash和history两种模式

        hash：在url地址上存在#，其通过锚点进行的跳转；在vue项目中，如果没有声明路由模式，其默认为hash模式；hash模式可以使用回车来进行页面刷新，抛开vue项目，hash是可以支持低版本浏览器和IE

        history：在url地址上没有#号存在；回车刷新页面会成为404，如果想要解决这个问题，需要后端在服务端去配置前端路径；h5新增API，不支持低版本和IE。

引

了解本专栏 订阅专栏 解锁全文 超级会员免费看
arguments_zd
关注
  • 6
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue相同路由跳转强制刷新该路由组件操作
10-14
主要介绍了vue相同路由跳转强制刷新该路由组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue3.0路由跳转方式
zxyhj的博客
06-01 7448
Vue3.0路由跳转方式 路由标签router-view的理解
vue3.0---路由跳转
weixin_38687522的博客
06-07 458
<template> <div> <button @click="beginFn">开始任务</button> </div> </template> <script> import { defineComponent } from 'vue' import {useRouter} from 'vue-router' export default defineComponent({ name:'home',
Vue3：路由的两种模式history模式和hash模式
最新发布
Brave_heart4pzj的博客
03-21 672
Vue
Vue3.0 页面路由跳转的方式
mq1314520_zhl的博客
12-29 2820
Vue3.0 页面路由跳转的几种 方式
vue3路由跳转方法
每天都想吃好吃的
07-01 1305
vue3.0要注意，setup组件是在初始化之前执行，所以this还不是实例对象。vue3.0的处理方法就是，从vue-router中引入useRouter。利用useRouter来进行路由的跳转。.0跳转和vue2.0跳转方式差别不大，但是还有需要注意的地方。这里我介绍两种比较常见的路由跳转方法。name值是你在路由配置中的name属性。to 是你要跳转的路径，也就是接口。绑定点击事件的时候传入参数，进行判断跳转到哪个页面。1.利用router-link标签来进行跳转。2.点击事件进行路由的跳转。
vue3.0 路由跳转的方式
热门推荐
a13145211的博客
09-25 2万+
方式1 import { useRouter } from 'vue-router'; export default { setup() { const router = useRouter(); function goto(){ router.push("/about"); } return{ goto //一定要要放在return里才能在模板上面使用 } } } 方式2 import router from "../../ro
vue3.0 CLI - 3.2 路由的初级使用教程
10-18
主要介绍了vue3.0 CLI - 3.2 - 路由的初级使用教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue3.0+element-plus的一个子路由跳转
05-13
点击导航在当前页面切换内容 导航不变
vue 跳转 同一路由不刷新问题解决(相同path不同query)
01-08
 遇到个需求，要求在同一个path下，通过不同的query实现跳转不同的页面，大概就是下面这个样子: 这样当全路径变化的时候，就会触发跳转了。 BerySteven_shen 原创文章 79获赞 39访问量 6万+ 关注
vue3-elementPlus-admin:vue3后台管理模板 , 基于vue3.0 + elementPlus 实现的后台管理系统模板 动态路由 动态菜单 皮肤切换 登录逻辑
05-10
基于vue3.x 实现的后台管理系统模板 1、 登录逻辑. 2、 基本布局(基于elementPlus) 3、 动态路由逻辑 4、 动态菜单栏逻辑 5、 面包屑 6、 皮肤切换 7、 假数据模拟路由菜单 gif示例 Project setup yarn install ...
vue3.0 router路由跳转传参（router.push）
B13362260109的博客
07-18 994
vue3.0取消了2.0部分api，所以路由跳转传值方式有所不同。这里主要讲编程式导航，也就是router.push(location, onComplete?, onAbort?vue3.0新增API：useRouter和useRoute一.路由跳转1.首先在需要跳转的页面引入API---useRouter2.在定义router变量3.用4.如果有参数的话，在接收页面引入API--useRoute5.在接收页面定义变量route，获取传过来的变量。
vue3.0 路由跳转传参
七七的博客
03-18 395
vue3.0 路由跳转传参
Vue3.0实现todolist之跳转路由（常用的push,back,go等方法）
祈澈菇凉
09-27 1482
在home.vue里面 写一个button按钮 点击按钮 实现从首页跳转到about的界面 <button @click="goto">跳转路由</button> 这里需要从vue-router引入一个useRouter 函数(新增概念，在vue3里面以use开头的函数为hooks函数) import { useRouter } from "vue-router"; ...
vue路由跳转
Liberty_yes的博客
02-13 143
编程式路由导航和router-link跳转
Vue3 实现路由跳转
云胡
05-20 2万+
一、安装 vue-router npm install vue-router@4 二、新建 vue 页面 在 src 目录下新建 view 目录用来存放 vue 的页面。 然后在 view目录下新建两个 vue 页面，分别是 login.vue 和 register.vue。 2.1 login.vue <template> <div> 当前是登录页面 </div> </template> <script> export def
vue 路由跳转
凌风的博客
05-03 2500
vue 路由跳转 方法1–声明式（标签跳转）： &lt;router-link :to="index"&gt;&lt;/router-link&gt; 因为路由里面有id 如果路由里面没有id， 方法2-编程式（ js跳转）： router.push('index') ...
Vue路由跳转
weixin_44524835的博客
12-09 72
router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 <router-link :to="{name:'home', params: {id:1}}"> // para
vue3.0 van-tabbar路由跳转
05-27
你可以使用 Vue Router 来进行路由跳转。首先，你需要在 Vue 组件中引入 Vue Router： ```javascript import { useRouter } from 'vue-router' ``` 然后，你可以通过 `useRouter` 来获取路由对象： ```javascript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

arguments_zd

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

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

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

打赏作者

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

抵扣说明：

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

余额充值