本篇文章小编给大家分享一下Vue-router编程式导航的两种实现代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
页面导航的两种方式
声明式导航:通过点击链接实现导航的方式,叫做声明式导航
编程式导航:通过调用JavaScript形式的API实现导航的方式,叫做编程式导航
例如:普通网页中的location.href
编程式导航基本用法
常用的编程式导航 API 如下:
this.$router.push(‘hash地址')
this.$router.go(n)
const User = { template: '', methods: { goRegister: function(){ // 用编程的方式控制路由跳转 this.$router.push('/register'); } } }
具体吗实现:
Document 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' }})