专栏首页大前端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 条评论
登录 后参与评论

相关文章

  • Gatsby入门指南—添加博客文章列表(3)

    前端大彬哥
  • Gatsby入门指南—支持Markdown(1)

    前端大彬哥
  • Gatsby入门指南—使用GraphQL解析Markdown(2)

    GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述,使得客户...

    前端大彬哥
  • Vue路由vue-router

    Vue Router 是 Vue.js 官方的路由管理器 github: https://github.com/vuejs/vue-router 中文官方...

    羊羽shine
  • Vue Router详细教程

    额,啥玩意? 没听懂。在生活中,我们有没有听说过路由的概念呢? 当然了,路由器嘛。路由器是做什么的? 你有想过吗?路由器提供了两种机制: 路由和转送。路由是决定...

    说故事的五公子
  • vue学习笔记router传参

    这是刚入门vue的第五天,刷视频整整刷了100多p,过程是艰辛的。但收获了很多东西,

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

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

    okaychen
  • vue2.0一起在懵逼的海洋里越陷越深(二)

    因为vue最后生成的页面看似静态页面(对于静态页面这里有些偷鸡用法,不管你怎样,反正我已经露出了诡异的微笑?,再贴一个vue2.0 demo的项目地址,大爷有兴...

    前端博客 : alili.tech
  • 起步 - vue-router路由与页面间导航

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

    okaychen
  • Vue Router

      路由的实质是一种对应关系,url 与资源之间的对应关系就是路由。路由分为前端路由和后端路由,后端路由是由服务器完成转发,前端路由是 hash(锚点) 的变化...

    Demo_Null

扫码关注云+社区

领取腾讯云代金券