导航方式
在页面中,导航实现有2种方式:
声明式导航
它就是先在页面中定义好跳转的路由规则,vueRouter中通过 router-link组件来完成
<!-- 声明式导航 --> <router-link to="/hello" tag="p">去hello</router-link> <!-- 声明式导航传参 --> <router-link :to="{ path: '/news/199' }" tag="p">去news</router-link> <!-- 声明式导航name方式 --> <router-link :to="{ name: 'user_list' }" tag="p">去用户列表</router-link>
编程式导航
简单来说,编程式导航就是通过JavaScript
来实现路由跳转
<template> <div id="app"> <router-view></router-view> <!-- 编程式导航 --> <button @click="goToNews()">点击去新闻页面</button> </div> </template> <script> export default { // 后续写的所有以前的实例的属性以后都需要写在`export default` name: "App", components: {}, methods: { goToNews: function() { // 编程式导航传参 // this.$router.push({path: "/news",query: { news_id: 1216, author: "zhangsan" },}); // this.$router.push({ path: "/news/133" }); // 编程式导航传参name this.$router.push({name: "user_list",params: {id: 123456}}) // this.$router.go( n ); //n为数字 负数为回退 }, }, }; </script>
注意:
编程式导航在跳转到与当前地址一致的URL时会报错,但这个报错不影响功能:
如果患有强迫症,可以在路由入口文件index.js
中添加如下代码解决该问题:
// 获取VueRouter原型上的push const originalPush = VueRouter.prototype.push; // 对原先的push方法进行重写 VueRouter.prototype.push = function push(location) { // 在原先的代码基础上加了一个异常捕获,且并没有输出异常,所以就看不到报错了。 return originalPush.call(this, location).catch((err) => err); };
参数获取
<template> <div> <!-- 可以在视图中直接接收路由参数,但是一般不这么用 --> 这是news组件{{$route.params.id}} </div> </template> <script> export default { // 原先new Vue的时候可以写的属性,都可以在这里写 created() { console.log(this.$route.params.id); }, } </script>
面试题问题:
this.$router
与this.$route
有什么区别?
答:$router
是用于做编程式导航的(改变路由的);$route
是用户获取路由参数的。
Comments | NOTHING