34-vue中的编程式路由导航

最新推荐文章于 2023-12-29 09:47:40 发布
最新推荐文章于 2023-12-29 09:47:40 发布
阅读量142 收藏
点赞数
分类专栏： Vue尚硅谷学习旅程 文章标签： vue vue.js
本文为博主原创文章，未经博主允许不得转载
本文链接：https://blog.csdn.net/A_Bow/article/details/114239387
版权

理解

  编程式路由导航：用js代码来实现页面跳转 (例如点击按钮，添加事件监听使得页面来跳转)

window.location.href = url
window.location = url  //简洁写法

组件对象this的两个属性

  组件对象有两个属性：$route $router. 。
   $route代表当前组件，存储着一些数据；
   $router代表路由器，有一些功能性的方法

$router属性中的三个功能性方法

  1. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
  2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
  3. this.$router.back(): 请求(返回)上一个记录路由

$router属性的用法示例

在这里插入图片描述

在这里插入图片描述

不许人间见秃头xbw
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
24-vue中组件的通信方式之一：消息的订阅与发布的使用pubsub、 pubsub-js库的安装
code^_^熊的博客
02-13 672
1.pubsub-js库的安装 使用 消息订阅与发布，先在对应的项目中Terminal里安装pubsub-js库 1、查看pubsub-js 库是否已经存在该库命令： npm info pubsub-js 2、若不存在,则先安装pubsub-js 库，命令如下： npm install --save pubsub-js **注意:**上面两条命令，在vue项目的终端Terminal中输入 2.消息的订阅与发布的使用 优点：   消息订阅与发布 优点： 父子通信 、逐层通信、兄弟组件通信 等等都可以，没有
40-vue-在根据每个组件中的数据写成vuex时，注意的小点(mapActions、mapGetters、mapState、dispatch()、高级计算属性中的set、get)
code^_^熊的博客
03-07 569
1.vuex是全局的，所有组件都可以和它通信。 2.getters对象中没有this，应该用getters来取代this 图片示例 3.高级计算属性(包含get、set)   组件中get方法对应vuex中的getters对象。   组件中set方法写成了vuex中的actions。 4.mapState、mapGetters   mapState：组件中获得state对象中的共享状态。   mapGetters：组件中获得vuex中的和共享状态有关的计算属性 (例如：假若数组是共享的状态，那数组的长度这
vue-router 声明式路由导航和编程式路由导航
halo1416的博客
11-26 6798
前提： $router：路由器对象             $route：当前路由信息 一、 声明式路由导航 ==>> 即<router-link> eg： <router-link to='xxx' tag='li'> To PageB </router-link> 注意：<router-link> 会默认解析成 a 标签，可以...
用vue路由实现简单的编程式导航
weixin_43485190的博客
07-15 517
这个案例主要是用来复习vue-router的知识点，涉及到了路由的基本使用方法、路由重定向、动态路由分配及传递参数、路由编程式导航等知识点。 实现的思路： 首先定义一个App的根组件，然后将模板渲染到这个组件中，新建一个路由实例对象router，创建路由规则将这个模板渲染出来。 然后定义5个组件：用户管理组件（Users）、权限管理组件（Rights）、商品管理组件（Goods）、订单管理组件（Orders）、系统设置组件（Settings），并在根组件中添加这5个组件的路由链接和路由占位符，在路由实例对象
vue2进阶篇：vue-router之编程式路由导航
刘大猫
07-09 1223
vue2进阶篇：vue-router之编程式路由导航
Vue -- 编程式路由导航
emmmm.....
04-30 1570
1. 声明式导航 & 编程式导航 1.1 声明式导航 1.2 编程式导航 2. vue-router 中的编程式导航 API 2.1 常用的编程式导航 API 2.2 \$router.push与\$router.replace 2.3 $router.go 2.4 $router.back() & $router.forward() 3. 总结 编程式路由导航
Vue3-29-路由-编程式导航的基本使用
最新发布
northcastle的博客
12-29 855
vue3 中 编程式导航的基本使用及案例展示
讲解vue-router之什么是编程式路由
08-27
以上是 Vue Router 中编程式路由的基本使用，它为我们提供了丰富的导航控制能力，使得在 Vue 应用中处理复杂的页面交互成为可能。了解并熟练掌握编程式路由，能够极大地提升开发效率和应用的可维护性。在实际项目中...
vue-router命名路由和编程式路由传参讲解
01-19
你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。 重点代码： 效果： 若有不足请多多指教！希望给您带来帮助！ 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习...
vue-router实现编程式导航的代码实例
01-19
注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击...
Vue3.0 声明式导航，编程式导航，路由，路由拦截案例
11-08
在这个“Vue3.0声明式导航，编程式导航，路由，路由拦截案例”中，我们将深入探讨Vue3.0的导航机制，包括其声明式和编程式的导航方式，以及如何利用Vue Router进行路由管理和实现路由拦截。 1. **声明式导航** Vue...
22-vue 组件通信的五种方式(总结)：props、自定义事件、ref\refs 、消息的订阅与发布(pubsub-js库)、slot插槽法
code^_^熊的博客
02-13 434
第一种 props   父组件用 ：（v-bind的简写）传递，子组件用 props 来接收，并注明类型 代码示例 父组件代码： <template> <TodoHeader :addTodo="addTodo"/> </template> 子组件代码： export default{ props:{ addTodo：Function } } this.$emit(“方法名”，方法中参数) 第二种 自定义事件   父组件用@(v-on的简写)来绑定事件，
33-vue项目用到的js数组方法
code^_^熊的博客
02-21 415
①filter() 等待中…以后遇见了再补充吧    ②map()：   理解：从一个数组中的每个对象元素中抽取个别属性，作为一个对象放在相同的下标位置，要用数组的map方法。   括号里要写抽取元素，结果返回的是新数组 代码示例 const users = result.items.map(item => ({ //item是数组中对象元素 name:item.login, //将items 数组中每个对象的item.login属性值赋给新数组users中每个对象元素的name属性。(下同)
42-vuex中-实现异步请求(读写)数据(actions对象和backend的数据交互)的步骤
code^_^熊的博客
03-11 396
①父组件中app.vue中，mounted生命勾子中使用dispatch()向actions对象发送给命令 ②actions中将数据提交给mutations对象 (还需要在mutations-type中收集commit()方法的消息名) ③mutations对象中显示state共享状态的方法、 ...
29-vue-嵌套路由的理解和使用
code^_^熊的博客
02-19 343
理解   路由组件中包含着组件 嵌套组件的使用(写法)   ①定义(要嵌套的)路由组件。   ②注册路由：和基本路由一样需要在路由器里进行注册路由 代码示例 ①定义(要嵌套的)路由组件。   和基本路由的定义方法一样。 此步骤可以参考链接：28-vue中vue-router-基本路由的理解和使用. ②注册路由：在父组件路由的注册下进行注册。   补充   嵌套路由组件的默认显示 ...
Vue的引入-(Vue学习-01)
code^_^熊的博客
01-26 330
Vue的引入   可以在<head>标签中引入vue.js的文件。 示例 <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js"></script> </head> vue.js文件的来源   链接: Vue.js.   进入连接中的网页后，往下滚动页面找到下图中所示，“开发版本”和“生产版本”都可以下载使用。其他引
28-vue中vue-router-基本路由的理解和使用
code^_^熊的博客
02-18 289
什么是路由   路由 是一种映射关系： k-v   k是path   v是value，前端value是组件；后端value是 回调函数。   路由器 管理 路由   路由的优点：   用户体验好，不需要每次都从服务器全部获取，快速展现给用户   路由器的使用   ①定义路由组件(在views文件中写)   ②将路由组件映射成路由(创建路由器文件)   ③配置路由器(在main.js中配置)   ④写界面（在App.vue，用到 标签） 代码图片示例   ①定义路由组件(在views文件
尚硅谷的vue旅程12-vue中的生命周期(部分原理、常用勾子和完整的生命周期展示)
code^_^熊的博客
02-04 290
简介 一. 1.vue对象的生命周期 1).初始化显示 (只执行一次) * beforeCreate() * created() * beforeMount() * mounted() 2).更新显示 this.xxx = value (执行n次) * beforeUpdate() * updated() 3).销毁死亡 this.$destroy() (只执行一次) * beforeDestroy() * destro
41-vue中-接口main.js中-render渲染函数(简化了映射组件为标签、使用标签的写法)
code^_^熊的博客
03-10 279
1.使用render渲染函数之前的写法 new Vue({ el:"#app", components:{ App }, template:"<App/>" }) 2.使用render渲染函数之后的写法 render渲染函数，相当于将component属性和template属性二者的代码换作了简化写法 new Vue({ el:"#app", render:h => h(App)//传入的参数h是一个函数createElement()函数的对象 }) 3
vue编程式导航多级路由的用法
06-01
在Vue中，可以通过编程式导航来实现路由的跳转。对于多级路由，可以使用以下示例代码来实现： ```javascript // 在Vue组件中，使用$router.push方法来进行编程式导航 this.$router.push({ path: '/home/page1' }) // 跳转到/home/page1路由 ``` 在多级路由中，可以使用params参数来传递路由参数。示例代码如下： ```javascript // 在Vue组件中，使用$router.push方法来进行编程式导航，并传递参数 this.$router.push({ name: 'page1', params: { id: 1 } }) // 跳转到name为page1的路由，并传递参数id=1 ``` 在子路由中，可以通过$route.params来获取父级路由传递的参数。示例代码如下： ```javascript // 在子路由的Vue组件中，通过$route.params来获取父级路由传递的参数 export default { name: 'page1', props: ['id'], mounted() { console.log(this.$route.params.id) } } ``` 通过以上代码，就可以实现Vue编程式导航多级路由的用法了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值