浅谈route和touter


route和router

文章目录

    • route和router
  • 前言
  • 一、什么是路由?
  • 二、路由中的基本概念
    • 路由中有三个基本的概念 route, routes, router。
  • 总结


前言

一、什么是路由?

根据不同地址,创造不同页面。如单页面应用,不刷新整个页面,不频繁请求,请求数据,通过js操作(ajax),如:切换两个不同图片,不同地址,只需第一次需要请求,第2次共用请求资源,只需再请求一张图片即可

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。比如我点击关于 按钮,页面中怎么就正好能显示关于的内容。这就要在js 文件中配置路由。

二、路由中的基本概念

路由中有三个基本的概念 route, routes, router。

1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, about按钮 => about 内容, 这是另一条路由。

2, routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]

3, router 是一个机制,相当于一个管理者,它来管理路由。因为routes 只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。

总结

router、routes、route的区别
1.router:路由器对象,包含一些操作路由的功能函数,来实现编程式导航。一般指的是在任何组件内访问路由。如:路由编程式导航的$router.push()

2.routes:指创建vue-router路由实例的配置项。用来配置多个route路由对象

3.route:指路由对象表示当前激活的路由的状态信息。如:this.$route指的是当前路由对象,path/meta/query/params

你可能感兴趣的:(vue.js)