专栏首页大前端666Vue实战系列—路由轻松设置vue-router(3)
原创

Vue实战系列—路由轻松设置vue-router(3)

上篇我们说了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

    <router-link to="/goods" class="nav-item">点菜</router-link>
    <router-link to="/rates" class="nav-item">评价</router-link>
    <router-link to="/seller" class="nav-item">商家</router-link>

to是路由指向的地址。

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

<router-view/>

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/migration-vue-router.html#router-redirect-%E6%9B%BF%E6%8D%A2

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

linkActiveClass:'active'

linkActiveClass:固定属性;

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

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

4.路由的keep-alive

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

  • 我们在点菜页面;
  • 点了些食品;
  • 那么现在购物车内会有我们点过的数据;
  • 点击其他页面,数据需要得到保留。 所以使用keep-alive保留组件状态,避免重新渲染,购物车的数据丢失。
        <keep-alive>
            <router-view ></router-view>
        </keep-alive>

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

总结

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue3.0入门 + Vant3.0移动端实践(一)

    Vue3.0出来了,感觉Vue3.0比2.0好用多啦,且据说性能也有不少的提升,那么今后拥抱Vue3.0吧,会是个趋势。

    独行猫A
  • 前端进阶知识汇总

    年初突然有了个想法,前端也做了几年了,但是很多知识还很零散,应该系统的把知识归纳起来,于是给自己制定了一个计划,决定花大半年的时间整理一下大前端的知识,把他们都...

    蒋鹏飞
  • Vue Router 4.0 正式发布!焕然一新。

    在经历了 14 个 Alpha,13 个 Beta 和 6 个 RC 版本之后,Vue Router v4 闪亮登场,为你带来了 TypeScript 集成、新...

    lucifer210
  • Vue Router 4.0 正式发布!焕然一新。

    在经历了 14 个 Alpha,13 个 Beta 和 6 个 RC 版本之后,Vue Router v4 闪亮登场,为你带来了 TypeScript 集成、新...

    若川
  • Vue Router 4.0 发布!焕然一新。

    在经历了 14 个 Alpha,13 个 Beta 和 6 个 RC 版本之后,Vue Router v4 闪亮登场,为你带来了 TypeScript 集成、新...

    ssh_晨曦时梦见兮
  • 最有效、最全的Vue 2.0 学习路线,各个阶段适用

    对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作d...

    一墨编程学习
  • 【Vue.js】Vue.js中常用的UI组件库和Vue Router

    一般移动端建议使用vant,后台管理系统建议使用Ant Design Vue或Element UI。

    魏晓蕾
  • 通过 Laravel 创建一个 Vue 单页面应用(一)

    使用 laravel 创建一个 Vue 单页面应用 (SPA) 可以构建一个整洁的由 API 驱动的应用。在此教程中,我们将学习如何构建并运行一个以 Vue 路...

    hedeqiang
  • 前后端通吃,vue大全Mark一下

    仓库地址:https://github.com/opendigg/awesome-github-vue

    java乐园
  • vue.js应用开发笔记

    看vue.js有几天了,之前也零零散散的瞅过,不过一直没有动手去写过demo,这几天后台事比较少,一直在讨论各种需求(其实公司对需求还是比较重视与严谨的,一个项...

    用户1141560
  • 瑜亮之争:Vue与React的差异

    在 React 和 Vue 之间存在许多相似性。Vue 的设计理念充分汲取了 Angular 和 React 的优点并将它们结合起来,所以如果你真的特别喜欢 R...

    用户1682855
  • Vue2.0 路由配置及Tab组件开发

    本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

    Nian糕
  • 深入探索 Vue 路由

    SPA 非常好,因为它们不需要在每次更改路由时都去加载页面。这就意味着一旦加载了全部内容,就可以真正快速地对视图进行切换,并提供出色的用户体验。

    疯狂的技术宅
  • 【程序源代码】Vue开源项目库汇总

    最近在学习VUE,感觉确实不错的前端框架。但光学习基本有点太慢,时间太长,主要是为了项目上手使用,所以在网上找了找比较好的VUE框架开发的项目实例。分享给大家。...

    程序源代码
  • Vue.use 源码分析

    vue提供了 Vue.use 的全局api来注册插件,了解它的内部实现,无论是看插件的源码,还是自己写插件,都会轻松很多。

    木子星兮
  • Vue项目预渲染机制引入实践

    周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着...

    前端下午茶
  • 起步 - vue-router路由与页面间导航

    我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理。可以说所有的后端开发都是这样做的,而前端路由是不...

    okaychen
  • 起步 - vue-router路由与页面间导航

    vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理。可以说所有的后端开发都是这...

    okaychen
  • 从零到部署:用 Vue 和 Express 实现迷你全栈电商应用(一)

    Vue 是尤雨溪[1]在 2014 年创建的一个前端框架,目前 Github[2] Star 数高达 150K,是 Star 数最高的前端项目,并且 Vue 有...

    一只图雀

扫码关注云+社区

领取腾讯云代金券