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 相关文章推荐
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
详解实现vue的数据响应式原理
Jan 20 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue如何清除浏览器历史栈
May 25 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 Ajax乱码
2008/04/09 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
wxPython中listbox用法实例详解
2015/06/01 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python列表对象实现原理详解
2019/07/01 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
python绘制动态曲线教程
2020/02/24 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
python属于跨平台语言码
2020/06/09 Python
捷克时尚网上商店:OTTO
2018/03/15 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
妇女儿童发展规划实施方案
2014/03/16 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js