router-link和router.push实现跳转的原理

最新推荐文章于 2023-03-07 17:16:21 发布
最新推荐文章于 2023-03-07 17:16:21 发布
阅读量666 收藏
点赞数 1
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Anony_me/article/details/121144636
版权

router-link和router.push实现跳转的原理

总体区别：router-link标签实现，router.push通过JS实现
router-link

<router-link :to="...">会在页面渲染的时候就加载对应的路由比起直接写的方式的优点：不管是h5的history还是hash模式，切换的时候很方便；会默认阻止浏览器的默认事件；写路径的时候不用写基路径了。

①默认会渲染为 a 标签(). 可以通过 tag 属性修改为其他标签
②自动为 a 标签添加 click 事件. 然后执行
$router.push() 实现跳转

$router.push

$router.push("/myroute")跳转到对应的路径，可在页面中写对应的点击事件，然后执行对应的方法中写跳转，可在跳转前再写一些别的逻辑。
根据路由配置的 mode 确定使用 HTML5History 还是 HashHistory 实现跳转

HTML5History : 调用 window.history.pushState() 跳转
HashHistory : 调用HashHistory.push() 跳转

小何同学要加油
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-router 2.0 跳转之router.push()用法说明
10-14
在声明式和编程式的 `<router-link>` 中，也可以通过 `replace` 属性实现相同效果。 有时，我们需要根据当前路由的查询参数进行导航。例如，如果登录页跳转到首页时需要保留某些查询参数，可以这样做： ```...
vue-router重写push方法,解决相同路径跳转报错问题
10-14
const routerPush = Router.prototype.push ``` 接着，我们将创建一个新的`push`方法来覆盖原有的`push`，这个新方法会在遇到相同路径时添加一个随机参数，从而强制更新视图： ```javascript Router.prototype....
vue $router和$route的区别详解
01-22
一、router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。。。 this.$router.push会往history栈中添加一个新的记录。。详细见vue官方文档 route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等。。 打印this.$route和this.$router。 路由传参的方式 1.可以手写完整的path： this.$router.push({path:`/user/$
Vue-详解设置路由导航的两种方法： <router-link :to="..."> 和router.push(...)
weixin_30648963的博客
03-08 615
一、<router-link :to="...">　　to里的值可以是一个字符串路径，或者一个描述地址的对象。例如： // 字符串 <router-link to="apple"> to apple</router-link> // 对象 <router-link :to="{path:'apple'}"> to apple&l...
react-router原理之Link跳转
weixin_34218890的博客
05-24 2322
react-router原理之路径匹配一文中讲了react-router如何根据url进行路径匹配进而完成不同的组件渲染。接下来继续讲一下如何改变url。仍旧以官网为例，演示地址 const BasicExample = () =&gt; ( &lt;Router&gt; &lt;div&gt; &lt;ul&gt; &lt;li&gt; ...
$router.push和 ＜router-link＞ 的区别
Max_Tsui的博客
01-23 1486
$router.push可以写在methods里面，进行跳转 可以写在标签内 https://www.cnblogs.com/antyhouse/p/9282682.html
vue2路由的＜routerlink＞和router.push()
JavaAlliance
08-29 1929
一、<router-link的使用 <router-link>组件支持用户在具有路由功能中的点击导航。通过to属性指向目标地址，默认渲染成正确的a标签 1.to属性 字符串或是对象类型 点击会立刻把内部to值传送到router.push() （解释：router.push(location) 就相当于我们用鼠标点击了location这个a链接一样，本文后面有对router.pu......
【JavaScript源代码】Vue router-view和router-link的实现原理.docx
12-29
`<router-link>` 和 `<router-view>` 是 Vue Router 提供的两个核心组件，它们协同工作，实现了单页面应用(SPA)中的导航和视图切换。 **1. `<router-link>` 的实现原理** `<router-link>` 是 Vue Router 用于创建...
详解vue-router 2.0 常用基础知识点之router-link
12-09
在Vue 2.0中，`router-link`组件是用于创建导航链接的关键元素，它与`router-view`配合使用，实现了单页面应用(SPA)的页面切换。 首先，我们来看`$route.params`。这是一个对象，存储了动态路径参数和全匹配片段。...
Vue--Router--router-link与this.$router.push--使用/区别
IT利刃出鞘的博客
08-17 1861
本文介绍Vue Router的声明式路由跳转（router-link）与编程式路由跳转（this.$router.push）。
vue路由导航router-link和router.push()
m0_71266543的博客
08-31 451
Vue-详解设置路由导航的两种方法： <router-link :to="..."和router.push(...)
vue-router
weixin_30514745的博客
08-21 124
1.router.route <router-link :to="...">等同于调用router.push(...) 该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如： // 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({...
VUE路由router-link和router.push用法
qq_42362347的博客
11-03 1232
一、 　　to里的值可以是一个字符串路径，或者一个描述地址的对象。例如： 　　// 字符串 <router-link to="apple"> to apple</router-link> // 对象 <router-link :to="{path:'apple'}"> to apple</router-link> // 命名路由 <router...
详解vue中路由跳转的几种方式（和$router下路由跳转的那几个方法的区别）
zhangkunsir的博客
03-07 524
replace`方法与`push`方法类似，也可以用来导航到指定的路由，但它不会在浏览器的历史记录中添加一条新的记录，而是替换当前的记录。`push`方法会在浏览器的历史记录中添加一条新的记录，当用户点击浏览器的后退按钮时，可以回退到之前的页面。在Vue实例中，可以使用`$router`对象来实现编程式导航，该对象提供了一些方法，如`push`、`replace`、`go`等。`go`方法用来在浏览器的历史记录中前进或后退指定的步数，参数n可以是正数或负数，正数表示前进，负数表示后退。
页面路由跳转
qq_53116438的博客
09-20 522
路由跳转
简单易懂，超详细 Vue-Router 原理实现
m0_37869769的博客
02-10 240
Vue-Router 实现思路 创建VueRouter插件，实现静态方法install。为什么要install静态方法呢？因为我们在Vue中注册VueRouter插件，即Vue.use(VueRouter) 时，Vue内部先判断传进来的VueRouter是函数还是对象，函数则执行，对象则调用其install方法，并会将Vue对象作为参数传入。 判断插件是否已经被加载。（只要加载一次） 当Vue加载的时候把传入的router对象挂载到Vue实例上。（只执行一次） 当我们将路由信息放入VueRouter
对router-link:to和$router.push的理解
我是一只蘑菇17的博客
12-22 747
<router-link :to='/myroute'>跳转到我的路由</router-link> 使用router-link方式跳转，会在页面渲染的时候就加载对应的路由比起直接写<a href = ''>的方式的优点：不管是h5的history还是hash模式，切换的时候很方便；会默认阻止浏览器的默认事件；写路径的时候不用写基路径了。$router.push('/...
【SDU项目实训2019级】router-link的:to 和@click谁先执行
李小恩恩子的博客
06-05 599
在写下面的代码的时候： 由于点击这个router-link会触发两个不同的事件，一个是href属性所对应的链接，一个是@click，然后我发现，我每次点击，并不会触发我的@click里面调用的js函数，搜了一下，然后发现：原因：router-link会阻止click，mouseover事件，只用click不用native，事件不会触发。根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上nati..
router-link和$routuer.push的区别
最新发布
05-12
`<router-link>` 是 Vue Router 提供的组件，用于生成路由链接，它会被渲染成一个 `<a>` 标签，点击它会触发路由跳转。它的作用是提供一个可作为跳转链接的标签。 `$router.push` 是 Vue Router 提供的实例方法，用于编程式导航，它可以在 JavaScript 代码中进行调用，实现路由的跳转。它的作用是在代码中实现跳转，比如在某个事件触发后跳转到指定的页面。 总的来说，`<router-link>` 适合在模板中生成链接，`$router.push` 适合在 JavaScript 代码中进行跳转。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值