Vue-router编程式导航的两种实现代码


Posted in Vue.js onMarch 04, 2021

页面导航的两种方式

声明式导航:通过点击链接实现导航的方式,叫做声明式导航
例如:普通网页中的 <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>
   <h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为:{{age}}</h1>
   <button @click="goRegister">跳转到注册页面</button>
  </div>`,
  methods: {
   goRegister() {
   this.$router.push('/register')//编程式导航
   }
  },
  }

  const Register = {
  template: `<div>
   <h1>Register 组件</h1>
   <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编程式导航的实现代码的文章就介绍到这了,更多相关Vue router编程式导航内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 #Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 #Vue.js
vue3.0 项目搭建和使用流程
Mar 04 #Vue.js
vue 数据双向绑定的实现方法
Mar 04 #Vue.js
vue3.0中使用element的完整步骤
Mar 04 #Vue.js
VUE实现吸底按钮
Mar 04 #Vue.js
vue实现可移动的悬浮按钮
Mar 04 #Vue.js
You might like
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
php获取地址栏信息的代码
2008/10/08 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
php判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
解决jquery无法找到其他父级子集问题的方法
2016/05/10 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
更改Python命令行交互提示符的方法
2015/01/14 Python
python字典DICT类型合并详解
2017/08/17 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
装修施工安全责任书
2014/07/24 职场文书
家长给老师的感谢信
2015/01/20 职场文书
纪检监察立案决定书
2015/06/24 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang