<

路由轻松设置vue-router(2.2)

上篇我们说了vue项目的目录设计,本篇我们来学习一下vue路由。

 

路由的作用

在web端路由(route)就是URL到函数的映射,vue的router就像一个容器,分配,处理每一个route到URL中。

 

文档地址

vue路由官方文档:https://router.vuejs.org/zh/guide/#html

 

安 装

  • 通过node.js安装:

1npm install vue-router

img

 

  • img但是一般情况下在node中安装vue项目的时候根据提示选择安装vue-router。

 

如何使用路由? 举个项目例子:

1.添加路由链接,打开Nav.vue

to是路由指向的地址。

 

2.决定将组建渲染在哪,

打开App.vue,添加:

 

3.配置路由,

打开router文件夹下index.js

 

redirect路由重定向:

我们在router数组设定redirect为“/goods”。那么只要路径是/。页面会跳转到"/goods"页面。

 

redirect官方文档:

https://cn.vuejs.org/v2/guide/migration-vue-router.html#router-redirect-%E6%9B%BF%E6%8D%A2

 

注意,当前激活导航设置方法:

 

linkActiveClass:固定属性;

 

‘active’:值。是我们定义的class类;

imgimg

我们在点击评价时,会得到上图中的效果。

 

4.路由的keep-alive

img

 

针对上图中的业务情况

  • 我们在点菜页面;
  • 点了些食品;
  • 那么现在购物车内会有我们点过的数据;
  • 点击其他页面,数据需要得到保留。

 

所以使用keep-alive保留组件状态,避免重新渲染,购物车的数据丢失。

 

keep-alive官方文档:

https://cn.vuejs.org/v2/api/#keep-alive

 

总 结

我们从安装,到组件配置路由再到使用keep-alive的业务场景复现,让我们对vue的router相关的技术点有了一定了解,我们将一步步完善项目,丰富我们的技术经验。

 

下篇:我们通过axios为项目添加数据交互功能,敬请关注。