（尚硅谷）Vue笔记-----24

编程式路由导航

我们这部分就是我们仍然想做路由跳转，但是我们还不想使用router-link，为什么有这样的需求呢，是因为我们之前使用router-link都是使用a标签跳转的，我们现在想使用button按钮，这时候就不能再使用router-link了。

先把之前的代码放上来，之后我就不放完整截图了，只放修改的部分：

 

 

 

 

 

 

 

 

 

 

 

 

 

现在我们对它的功能进行一个升级。

 

我们给它添加一个按钮：

 

我们有了button按钮，就可以去引入我们的编程式路由导航了。

然后我们去给这些按钮添加点击事件：
 

 

 

我们的方法中参数传入遍历中的m，因为没在一个区域无法直接使用，然后我们使用router路由器的push方法就可以了。里面的内容和之前router-link中的没区别。

 

 

现在我们给replace也做个按钮点击事件：

 

 

 

现在我们再加上后退和前进的按钮：

 

使用router路由器中的back和forward方法。

 

在路由中还有一个go方法：

 

缓存路由组件

 我们还是去给这个内容添加功能，我们想在点击News后每一个新闻后面加一个输入框，输入内容：

 

 

当我们点击Message切走的时候：

 

再切回去：

 

我们的内容就不见了，因为我们之前说过，路由当不被使用时就被销毁了。所以现在我们想做的就是当且出去的时候依然能显示输入框中的内容。

 

 

因为在home组件中会两个路由组件Message和News都会在router-link中显示，所以我们给router-link添加keep=alive标签。就可以防止切出去的时候被销毁了，我们一定要加我们的include属性，这样就是只是News组件不被销毁，不然如果不加include的话，就是所有的home下的组件都不会被销毁。

 

 

我们想要缓存谁的include的那个名字是说组件名：