vue编程式路由小笔记

r囧r小猫 2022-12-16 05:54 165阅读 0赞

首先是来到登录页面，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70_pic_center]  
当我点击登录按钮时，进行编程式导航，如下  
![在这里插入图片描述][20201018191054526.png_pic_center]  
和设置路由一样，只不过这里就不需要设置compoent了，因为在router.js里面我已经设置这个这个路由以及compoent组件了，如下![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70_pic_center 1]  
\*注意：编程式导航一般只用到`this.＄router.push()`和`this.＄replace()`两种，前者意思是跳转后会堆加一个页面，点了返回，就会返回到历史页面，而后者它是替代当前页面，点了返回，会回不到上一个页面，[了解更多路由请点][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/873ae7d3c1614477bbfa9206e8607670.png
[20201018191054526.png_pic_center]: /images/20221123/9d8bad877fda4f43a1297765ae6718b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2Njk0MDU2_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/d4ea6485f7304931a21c2647d188573c.png
[Link 1]: https://router.vuejs.org/zh/guide/essentials/navigation.html

发表评论取消回复

表情：

评论列表（有 0 条评论，165人围观）

还没有评论，来说两句吧...

相关阅读

相关笔记二十三**、编程式路由导航

23.1 父组件引入 useNavigate。父组件 Home/ndex.jsx。子组件 classify.jsx。

迈不过友情╰/ 2024年05月01日 16:24/ 0 赞/ 92 阅读

相关 Vue Router 编程式导航

Vue Router 编程式导航

柔光的暖阳◎/ 2024年04月20日 12:07/ 0 赞/ 71 阅读

相关 vue路由配置路由传值编程式导航

百度小能手 > 1. 路由标签`<router-link></router-link>`该组件支持用户在具有路由功能的应用中 (点击) 导航。通过 to 属性指定目标

野性酷女/ 2023年06月15日 14:30/ 0 赞/ 22 阅读

相关 vue路由之编程式导航

vue路由之编程式导航之前学的导航是 router-link 映射路由，在写一个项目时出现了一些问题，必须要用新的导航来解决，于是上网找了一下，找到啦！链接

悠悠/ 2023年02月17日 11:23/ 0 赞/ 48 阅读

相关 Vue 编程式导航

所谓编程式导航指的是不通过router-link跳转，而是借助 router 的实例，通过代码的方式跳转。示例： App.vue <template>

超、凢脫俗/ 2022年12月22日 15:29/ 0 赞/ 182 阅读

相关 vue编程式路由小笔记

首先是来到登录页面，如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

r囧r小猫/ 2022年12月16日 05:54/ 0 赞/ 166 阅读

相关 vue中路由传参方式之二（this.$router.push进行编程式路由跳转传参）

this.$router.push进行编程式路由跳转传参 router中路由配置组件home点击传参组件homeDetails接受参数 rout

深碍√TFBOYSˉ_/ 2022年11月30日 12:37/ 0 赞/ 162 阅读

相关 vue编程式路由

![70][] 点击链接跳转到另一个页面, <router-link to="/Cart">点击跳转到购物车页面</router-link>这里是绝对路径在路由

叁歲伎倆/ 2022年05月09日 05:52/ 0 赞/ 225 阅读

相关 vue-router详尽：编程式导航、路由重定向、动态路由匹配、路由别名、嵌套路由、命名视图

vue-router编程式导航在vue项目中经常用到this.$router.push() 和 this.$router.replace() 方法进行路由跳转就是

缺乏、安全感/ 2021年09月17日 05:32/ 0 赞/ 730 阅读

相关 vue 编程式跳转

编程式导航,会返回一个Promise对象,包含当前导航的信息 (1)this.$router.push： (1)这个方法会向his

叁歲伎倆/ 2021年07月24日 14:40/ 0 赞/ 499 阅读