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

到此这篇关于Vue-router编程式导航的实现代码的文章就介绍到这了,更多相关Vue router编程式导航内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！