文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

实现Vue-router编程式导航的两种方法

2023-06-06 18:14

关注

这篇文章主要介绍“实现Vue-router编程式导航的两种方法”,在日常操作中,相信很多人在实现Vue-router编程式导航的两种方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”实现Vue-router编程式导航的两种方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

页面导航的两种方式

声明式导航:通过点击链接实现导航的方式,叫做声明式导航
例如:普通网页中的 <a></a> 链接 或 vue 中的 <router-link></router-link>
编程式导航:通过调用JavaScript形式的API实现导航的方式,叫做编程式导航
例如:普通网页中的 location.href

编程式导航基本用法

常用的编程式导航 API 如下:

this.$router.push(‘hash地址')

this.$router.go(n)

 const User = {   template: '<div><button @click="goRegister">跳转到注册页面</button></div>',    methods: {    goRegister: function(){       // 用编程的方式控制路由跳转       this.$router.push('/register');   }   }  }

具体吗实现:

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <!-- 导入 vue 文件 --> <!-- <script src="./lib/vue_2.5.22.js"></script> --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- <script src="./lib/vue-router_3.0.2.js"></script> --> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <!-- 被 vm 实例所控制的区域 --> <div id="app">  <router-link to="/user/1">User1</router-link>  <router-link to="/user/2">User2</router-link>  <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>  <router-link to="/register">Register</router-link>  <!-- 路由占位符 -->  <router-view></router-view> </div> <script>  const User = {  props: ['id', 'uname', 'age'],  template: `<div>   <h2>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为:{{age}}</h2>   <button @click="goRegister">跳转到注册页面</button>  </div>`,  methods: {   goRegister() {   this.$router.push('/register')//编程式导航   }  },  }  const Register = {  template: `<div>   <h2>Register 组件</h2>   <button @click="goBack">后退</button>  </div>`,  methods: {   goBack() {   this.$router.go(-1)   }  }  }  // 创建路由实例对象  const router = new VueRouter({  // 所有的路由规则  routes: [   { path: '/', redirect: '/user' },   {   // 命名路由   name: 'user',   path: '/user/:id',   component: User,   props: route => ({ uname: 'zs', age: 20, id: route.params.id })   },   { path: '/register', component: Register }  ]  })  // 创建 vm 实例对象  const vm = new Vue({  // 指定控制的区域  el: '#app',  data: {},  // 挂载路由实例对象  // router: router  router  }) </script> </body></html>

router.push() 方法的参数规则

 // 字符串(路径名称) router.push('/home') // 对象 router.push({ path: '/home' }) // 命名的路由(传递参数) router.push({ name: '/user', params: { userId: 123 }}) // 带查询参数,变成 /register?uname=lisi router.push({ path: '/register', query: { uname: 'lisi' }})

到此,关于“实现Vue-router编程式导航的两种方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯