Vue实战—路由轻松设置vue-router（3）

timger 发布于2019-08-23 18:08 / 2088人阅读

摘要：决定将组建渲染在哪，打开，添加配置路由打开文件夹下引入各个组件配置路由路径组件路由重定向我们在数组设定为。官方文档注意，当前激活导航设置方法固定属性值。所以使用保留组件状态，避免重新渲染购物车的数据丢失。

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

路由的作用：

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

文档地址：

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

安装：

通过node.js安装；

npm install vue-router

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

如何使用路由：

举个项目例子：

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

    点菜
    评价
    商家

to是路由指向的地址。

2.决定将组建渲染在哪，打开App.vue，添加：

3.配置路由,打开router文件夹下index.js

import Vue from "vue"
import Router from "vue-router"
//1.引入各个组件
import Goods from "@/components/Goods/Goods"
import Rates from "@/components/Rates/Rates"
import Seller from "@/components/Seller/Seller"

Vue.use(Router)
//2.配置路由   路径->组件
export default new Router({
  routes: [
    {
      path: "/",
      redirect:"/goods"
    },
    {
      path: "/goods",
      component: Goods
    },
    {
      path: "/rates",
      component: Rates
    },
    {
      path: "/seller",
      component: Seller
    }
  ],
  linkActiveClass:"active"
})

redirect路由重定向：

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

redirect官方文档：

https://cn.vuejs.org/v2/guide...

注意，当前激活导航设置方法：

linkActiveClass:"active"

linkActiveClass：固定属性；

‘active’：值。是我们定义的class类；

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

4.路由的keep-alive

针对于上图中的业务情况:

我们在点菜页面；

点了些食品；

那么现在购物车内会有我们点过的数据；

点击其他页面，数据需要得到保留。
所以使用keep-alive保留组件状态，避免重新渲染,购物车的数据丢失。

keep-alive官方文档：https://cn.vuejs.org/v2/api/#...

总结

我们从安装，到组件配置路由再到使用keep-alive的业务场景复现，让我们对vue的router相关的技术点有了一定了解，我们将一步步完善项目，丰富我们的技术经验。下篇我们通过axios为项目添加数据交互功能，敬请关注。

GPU云服务器云服务器 vue-router JS轻松实现CSS设置 vue-cli3 linux 路由设置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104731.html

手挽手带你学VUE：四档 Vue-cli3 Vuex Vue-router

摘要：安装过后到命令行执行检查版本，如果弹出版本的话恭喜你安装成功，我们开始进行下面的步骤了。全局安装的包名称由改成了。如果你已经全局安装了旧版本的或，你需要先通过卸载它。中的非常类似于事件每个都有一个字符串的事件类型和一个回调函数。视频教程由于思否不支持视频外链，视频请移步http://www.henrongyi.top 你能学到什么在这一期的学习进度中，我们会开始学习在我们工作开...

Sourcelink 2019-08-02 14:02 评论0 收藏0
手挽手带你学VUE：四档 Vue-cli3 Vuex Vue-router

摘要：安装过后到命令行执行检查版本，如果弹出版本的话恭喜你安装成功，我们开始进行下面的步骤了。全局安装的包名称由改成了。如果你已经全局安装了旧版本的或，你需要先通过卸载它。中的非常类似于事件每个都有一个字符串的事件类型和一个回调函数。视频教程由于思否不支持视频外链，视频请移步http://www.henrongyi.top 你能学到什么在这一期的学习进度中，我们会开始学习在我们工作开...

AlphaWallet 2019-08-23 14:28 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0