目录
在前面的文章中的例子都是使用声明式导航,即router-link标签创建的a标签链接跳转至其他组件页面,而编程式导航则是在业务逻辑代码中实现页面跳转。
跳转方式
1. push()方法
这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
语法:
router.push(location, onComplete?, onAbort?)
注意:在 Vue 实例内部,你可以通过 $router
访问路由实例。因此你可以调用 this.$router.push
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
字符串:
// 字符串
router.push('home')
对象:
// 对象
router.push({ path: 'home' })
this.$router.push({
// path是要跳转的页面路径,query携带需要传递的参数
path:'/details',
query:{id}
})
2.repalce()方法
跟 router.push
很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
语法:
router.replace(location, onComplete?, onAbort?)
this.$router.replace({
// path是要跳转的页面路径,query携带需要传递的参数
path:'/details',
query:{id}
})
3.go(n)方法
参数是一个数字,正数表示前进,负数表示后退,无参或参数为0表示刷新当前页面,数字过大记录不够用时就会报错。类似 window.history.go(n)
。 例如:
// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)
传参方式
1. path + query
this.$router.push({
// path是要跳转的页面路径,query携带需要传递的参数
path:'/details',
query:{id}
})
2.name + params
使用这种方式传参时需要在注册路由时使用name手动为路由取一个名字。
this.$router.push({
name:'ADetails',
params:{id},
})
**两种传参方式的区别?**
- query传递的参数会拼接在url地址栏,params传递的参数会携带在$route中(尽管query也会);
- query传递的参数刷新页面不会失效,而params传递的参数是一次性的,刷新即无。
注意:path与params不能一起使用, 不能跳转也不能传参,还可能会报错。
实例:
在昨天的基础上我们在组件中新加入了一个ArticleDetails.vue页面表示文章详情,当点击对应的文章标题会跳转的相应的文章详情页面:
在 index.js 配置组件路由:
// 导入
import ArticleDetails from '../components/ArticleDetails.vue'
……
// 注册路由
const routes = [
{
// 路径前一定要加斜线
path:'/details',
component:ArticleDetails,
// 给路由命名
name:'ADetails'
},
……
]
Article.vue
在模板对应处绑定一个相应的点击事件,并在methods中写入相应方法
ArticleDetails.vue
在文章详情页面使用$route接收路由跳转时携带的参数