文章目录

• props配置
• • props值为对象
  • props值为布尔值
  • props值为函数
  • 总结
• \的replace属性
• • 总结
• 编程式路由导航
• • 案例实现
  • 总结
• 缓存路由组件
• • 案例实现
  • 总结

props配置

我们可以看看我们原来如何使用传递过来的参数的：

我们要写一大长串去从$route身上拿到我们想要的数据，现在我们可以借助props配置简化代码。

props值为对象

然后我们使用的时候只需要注册一下就可以使用了，和父组件向子组件传递数据的那个props使用方法很相似：

但是这种方法有一些局限性，那就是传递的都是死数据。所以这种放使用的非常少。

props值为布尔值

然后我们注册id和title，就可以使用了：

这个方法的局限性也很明显，那就是只能接收到所有的params参数。你要是用query参数传过来的，那就使用不了

props值为函数

这个函数有一个特点：它可以从形参列表中拿到$route对象，有了$route对象,那我们基本上就可以上天下地无所不能。

其实这个方法就是把原来我们的代码逻辑移动到了另一个地方，让组件里面的代码不那么冗杂。

我们可以在这个方法的基础上利用js语法的特性使其更加精简：
使用js解构赋值：

使用解构赋值的连续写法：

总结

路由的props配置

作用：让路由组件更方便的收到参数

{name:'xiangqing',path:'detail/:id',component:Detail,//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件// props:{a:900}//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件props(route){return {id:route.query.id,title:route.query.title}}
}

的replace属性

我们可以看到我们的浏览器左上方有前进和后退键(edge只有后退键)：

它是根据浏览器的历史记录进行工作的

我们以我们前文中的案例为例：

我们依次点击About、Home、News

浏览器的历史记录是采用栈的形式进行记录的，我们产生的历史记录会以push压栈的形式进入到栈中：

并且有一个指针指向当前所处页面。

我们每点击依次后退，这个指针就会向栈底的方向移动一位，我们现在可以后退三次：

如果我们再点击前进，指针又会向栈顶移动一位。

对历史记录的操作除了push之外还有replace，也就是替换栈顶的一条记录：

也就是说我们依次点击About、Home、News之后，栈里面只有/home/news的记录。

默认我们的router-link是使用push方式添加历史记录，如果我们想以replace的方式，可以这样：

总结

的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
3. 如何开启replace模式：News

编程式路由导航

我们现在实现路由的跳转都是使用router-link标签，但是有的时候我们不能使用router-link，因为我们知道router-link的本质是a标签，如果此时我们是一个按钮，去用router-link进行路由跳转的话，这就造成了结构上的紊乱。

这个时候我们就要借助我们的路由器，去操作我们前面提到过的历史记录栈，来实现跳转。

我们以一个案例来进行说明

案例实现

因为是在前面的代码基础上进行的升级，所以我们只看看Message组件以及上面的前进后退按钮是怎么实现的。

首先我们要知道：我们自己实现路由跳转必须要借助$router原型对象上的方法：

Message.vue：

我们push和replace中传入的配置对象和我们在to中传入的对象一模一样。

再来看看我们的前进后退按钮：
Banner.vue：

说明：

这个go方法可以传入两种参数：

• 如果传入的是正数，则向前进n次
• 如果传入的是负数，则向后退n次

总结

编程式路由导航

1. 作用：不借助 实现路由跳转，让路由跳转更加灵活

2. 具体编码：

   //$router的两个API
   this.$router.push({name:'xiangqing',params:{id:xxx,title:xxx}
   })this.$router.replace({name:'xiangqing',params:{id:xxx,title:xxx}
   })
   this.$router.forward() //前进
   this.$router.back() //后退
   this.$router.go() //可前进也可后退
   

缓存路由组件

我们有的时候希望切换路由的时候，原路由不会被销毁。

例如下面这种情形：

我们在News组件中的每个li中加一个输入框，我们在输入框中打一个数字，然后我们切换到Message组件，此时我们再次切换回News组件的时候，我们发现我们输入框里面的东西已经没了。这就是因为News路由组件已经被销毁一次，我们使用的时候才创建。

那么我们怎么不让它被销毁呢？

案例实现

我们直接看Home组件(也就是News的父组件)：

说明：

• 如果不使用include属性，则此处呈现的路由组件都会被缓存
• include里面放的是组件名
  

  也就是这里的name后面跟的值

总结

缓存路由组件

1. 作用：让不展示的路由组件保持挂载，不被销毁。

2. 具体编码：