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

本篇文章小编给大家分享一下Vue-router编程式导航的两种实现代码，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

页面导航的两种方式

声明式导航：通过点击链接实现导航的方式，叫做声明式导航

例如：普通网页中的链接 或 vue 中的

编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航

例如：普通网页中的location.href

编程式导航基本用法

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

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

this.$router.go(n)

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

具体吗实现：

 
 
 
 
 
 
 
 
 
 
 
 
 

  User1
  User2
  User3
  Register

  
  
 

 
 

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' }})