11.vue-router编程式导航
页面导航的两种方式
- 声明式导航:通过点击链接实现导航的方式,叫做声明式导航
例如:普通网页中的 链接或vue中的 - 编程式导航:通过调用JavaScrip形式的API实现导航的方式,叫做编程式导航
例如:普通网页中的location.href
1.编程式导航基本用法
常用的编程式导航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');
}
}
}
2.编程式导航参数规则
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' }}}