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>
   <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编程式导航内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue router仿天猫底部导航栏功能

    vue router仿天猫底部导航栏功能

    首先把天猫的导航贴出来,里面包括精选.品牌.会员.购物车.我五个导航及对应的图标. 分析: 1.图标的获取 进入阿里巴巴矢量图标库,网址  http://www.iconfont.cn. 点击官方图标库,选择天猫图标库,选中放入购物车. 点击添加至项目,点击创建新项目按钮,创建tianmao项目,点击确定. 此时会有查看在线链接和下载至本地两种方式,我选择第一种,因为后期如果要添加小图标的话,只需要重新生成在线链接,然后更新link即可 复制链接到index.html的link标签内,具体为 <

  • vue router导航守卫（router.beforeEach()）的使用详解

    导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫.) 好久没写一些东西了,总是感觉有啥缺少的.~~~~恰好碰到最近在写一个移动端项目,遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题,譬如大家经常看到手机中没登录跳转登录页,登陆后跳转个人信息页等.废话不多说了

  • vue-router 实现导航守卫（路由卫士）的实例代码

    导航守卫 导航守卫即是在路由跳转的时候,根据vue-router提供的导航守卫主要用来通过跳转或取消参数或查询的改变并不会出触发进入/离开的导航守卫 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router

  • vue-router之实现导航切换过渡动画效果

    过渡动效 提供了transition的封装组件,添加过渡动画,通过添加或删除css类名来实现. 过渡的css类名: v-enter 进入过渡的开始状态 v-enter-active 进入活动状态 v-enter-to 进入的结束状态 v-leave 离开过渡的开始状态 v-leave-active 离开活动状态 v-leave-to 离开结束状态 过渡模式: in-out 先进后出 out-in 先出后进 用法: 做一个淡隐淡出效果 把想要运动的元素放到<transition></tra

  • vue-router实现编程式导航的代码实例

    vue-router实现编程式导航的代码实例

    除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现.即:通过js动态的进行导航链接. 一.this.$router.push( ) router.push(location, onComplete?, onAbort?) 注意:在 Vue 实例内部,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push. 想要导航到不同的 URL,则使用 router.push 方法.这个方法会

  • vue-router二级导航切换路由及高亮显示的实现方法

    vue-router二级导航切换路由及高亮显示的实现方法

    这里以网易云音乐作为示例,效果图: 我们先一层一层写导航 先设计第一层 1.设计导航页面样式 第一个导航页面为Discover Discover.vue: <!-- --> <template> <div> 发现 </div> </template> <script> export default { name: "discover", data() { return { }; } }; </script&g

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

    页面导航的两种方式 声明式导航:通过点击链接实现导航的方式,叫做声明式导航 例如:普通网页中的 <a></a> 链接 或 vue 中的 <router-link></router-link> 编程式导航:通过调用JavaScript形式的API实现导航的方式,叫做编程式导航 例如:普通网页中的 location.href 编程式导航基本用法 常用的编程式导航 API 如下: this.$router.push('hash地址') this.$router.g

  • Vue声明式导航与编程式导航及导航守卫和axios拦截器全面详细讲解

    目录 一.声明式导航&编程式导航 二.导航守卫 三.axios拦截器 一.声明式导航&编程式导航 1. 声明式导航:以超链接方式实现的页面跳转,就是声明式导航 < a href=‘url’> 链接文本或图像 < /a > < router-link to=‘url’ > 链接文本或图像 < /router-link > 2. 编程式导航:通过javascript提供的api方法实现页面的跳转,就是编程式导航 location.href = ‘

  • vue data引入本地图片的两种方式小结

    我就废话不多说了,大家直接看吧! 第一种 <template> <img :src="imgsrc"> </template> <script> export default { data () { return { imgsrc: require('../../images/ICON-electronicbilling.png') } } } </script> 第二种 <template> <img :s

  • vue 获取url里参数的两种方法小结

    我就废话不多说了,大家还是直接看代码吧~ 第一种: const query = Qs.parse(location.search.substring(1)) let passport = query.passport; 第二种: var query=this.$route.query; let lat = query.lat; 补充知识:Vue通过query获取路由参数 现在来讲Vue通过query获取路由参数 可以看见com1组件里的路由参数为 name=zhangsan&job=teache

  • React路由规则定义与声明式导航及编程式导航分别介绍

    React路由规则定义与声明式导航及编程式导航分别介绍

    目录 1. 路由使用 2. 声明式导航 3. 编程式导航 1. 路由使用 安装路由模块: 路由模块不是react自带模块,需要安装第3方模块: yarn add react-router-dom@5 路由相关组件: 路由模式组件:包裹整个应用,一个React应用只需要使用一次 HashRouter: 使用URL的哈希值实现 (localhost:3000/#/first) BrowserRouter:使用H5的history API实现(localhost3000/first) 导航组件:用于指

  • Vue中引入svg图标的两种方式

    Vue中引入svg图标的两种方式

    Vue中引入svg图标的方式 Vue中引入svg图标的方式一 安装 yarn add svg-sprite-loader --dev svg组件 index.vue <!-- svg组件 --> <template> <svg class="svg-icon" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName&quo

  • java实现遍历树形菜单两种实现代码分享

    文本主要向大家分享了java实现遍历树形菜单的实例代码,具体如下. OpenSessionView实现: package org.web; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.se

  • java检查服务器的连通两种方法代码分享

    首先要了解一下ping的内容. 概述 PING (Packet Internet Groper),因特网包探索器,用于测试网络连接量的程序.Ping发送一个ICMP(Internet Control Messages Protocol)即因特网信报控制协议:回声请求消息给目的地并报告是否收到所希望的ICMPecho (ICMP回声应答).它是用来检查网络是否通畅或者网络连接速度的命令.作为一个生活在网络上的管理员或者黑客来说,ping命令是第一个必须掌握的DOS命令,它所利用的原理是这样的:利用

  • Hibernate中获取Session的两种方式代码示例

    Session:是应用程序与数据库之间的一个会话,是Hibernate运作的中心,持久层操作的基础.对象的生命周期/事务的管理/数据库的存取都与Session息息相关. Session对象是通过SessionFactory构建的,下面举个例子来介绍Hibernate两种获取session的方式. 日志,是编程中很常见的一个关注点.用户在对数据库进行操作的过程需要将这一系列操作记录,以便跟踪数据库的动态.那么一个用户在向数据库插入一条记录的时候,就要向日志文件中记录一条记录,用户的一系列操作都要在

  • java获取登录者IP和登录时间的两种实现代码详解

    第一种直接用java自带的InetAddress类: import java.net.InetAddress; import java.text.SimpleDateFormat; import java.util.Date; public class test{ public static void main(String[] args) throws Exception{ InetAddress addr = InetAddress.getLocalHost(); String ip=add

随机推荐