位置: 编程技术 - 正文

vue-router路由与页面间导航实例解析(请简述vue-router路由的作用)

编辑:rootadmin

推荐整理分享vue-router路由与页面间导航实例解析(请简述vue-router路由的作用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue路由routerview,vue router路由配置,vue router 路由参数,vue router路由配置,vue路由的区别,vue路由routerview,vue router路由配置,vue路由的区别,内容如对您有帮助,希望把文章链接给更多的朋友!

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。

vue-router

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

前端路由是找到地址匹配的一个组件或者对象将其渲染出来。改变浏览器地址不向服务器发送请求有两种方法,

一是在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航;二是使用HTML5的window.history功能,使用URL的hash来模拟一个完整的URL。

vue-router是官方提供的一套专用的路由工具库,是vue的一个插件,我们需要在全局引用中通过vue.use()将它引入到vue实例中,

使用vue-cli创建项目后(init初始化时vue-router确认y)

我们先来看一下项目src的结构,通过cmd进入到项目src目录下,执行 tree -f > list.txt 生成结构树(保存在list.txt中):

结构如下:

1、打开main.js:

第行将配置的路由绑定到vue实例上,第行在vue实例中使用render方法来绘制这个vue组件(App)完成初始化

Render是vue2新增的具有特色的方法,为了得到更好的运行速度,vue2也采用的类似react的Virtual Dom(虚拟Dom)

2、然后我们在components中注册几个组件

3、打开router/index.js配置路由

路由的模式

关键词:"mode","history模式","hash模式","Abstract模式"

我们可以在创建的Router中使用模式,如参数mode:history的参数,这个值意思是使用history模式,这种模式充分利用了history.pushState API来完成URL的跳转而无需重新加载页面 ,

如果不使用history模式,当访问rank的时候路由就会变成:

Hash:使用URL hash值作为路由, History:依赖HTML5 History API和服务器配置 Abstract:支持所有JavaScript运行环境,如node服务器端。如果发现没有浏览器的API,路由就会强制进入这个模式

路由与导航

关键词:"router-link" , "router-view"

vue-router提供两个指令标签组件来处理这个导航与自动渲染逻辑:

<router-view>——渲染路径匹配到的组件视图, <router-link>——支持用户在具有路由功能的应用中导航

我们使用整两个标签组件来完成一个简单的页面布局:

vue-router路由与页面间导航实例解析(请简述vue-router路由的作用)

在路由使用时要明确一个原则就是:不直接引用路由定义,(即不要在router-link直接通过 to='conpontents/rank/rank' 来导向路由),当显式引用路由定义的URL一旦发生变化,所有引用的地方都要修改。

在router-link通过名称引用路由:向to属性传入一个对象显式的声明路由的名称:

<router-link :to="{ name:'rank' }">

这里留意使用v-bind绑定(简写:),因为这里需要向router-link传递的是一个对象{ name:'rank' }而不是一个字符串

动态路由

关键词:"动态路由参数","params","$router.params"

vue-router将参数融入到路由的路径定义之内成为路由的一部分,我们称这种参数为"动态路径参数";

使用非常简单,在参数名之前加上":",然后将参数写在路由定义的path内,

1、这样定义之后,vue-router就会自动匹配/books/1、/books/2、...、/books/n 形式的路由模式,因为这样定义的路由的数量是不确定的,所以也称为"动态路由"。

2、在<router-link>中我们就可以加入一个params的属性来指定具体的参数值:

3、当我们导航进入图书详情页之后,我们可能需要获取属性指定的参数值(即重新将:id参数读取出来),我们可以通过$router.params来完成:

嵌套式路由

关键词:"children",

我们利用下面的场景,首页/home/读书详情 页面,读书详情也我们不需要底部的导航区域,但是我们使用之前的路由定义,所有的页面都应该具有想用的底部导航条,按前面的路由结构是不可以导航到图书详情页的,如下:

所以我们就需要另一种定义路由的方式,对前面的路由进行调整,

嵌套式路由又叫做子路由,要将路由显示到子视图中就要相应的子路由与之对应,我们只需要在路由定义中使用children数组属性就可以定义子路由了:

需要注意的是以"/"开头的嵌套路径会被当做根路径,所以不要在子路由上加上"/";

重定向路由与别名

关键词:"redirect","alias"

重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:

另外我们需要区别重定向和别名,『重定向』的意思是,当用户访问 /a时,URL 将会被替换成 /b,然后匹配路由为 /b,那么『别名』又是什么呢?

/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样:

利用alias给路由设置别名

总结

到这里vue路由的基础我们已经总结完毕,我们需要在实战中不断练习,多多的去解决问题,方能更好的使用路由 帮我们完成任务,同时为vue进阶的路由知识打基础

vue实现仿淘宝结账页面实例代码 虽然Vue最强大的是组件化开发,但是其实多页面开发也蛮适合的。下面小编给大家分享vue实现仿淘宝结账页面实例代码,具体内容大家参考下本文。这

AngularJs 终极购物车(实例讲解) 废话不多说,直接上代码:!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"title购物车/titlescriptsrc="angularjs/angular.js"/scriptstyle.box{width:%;border-bottom:1pxsolidsilver;}.box1{

浅谈vue-router2路由参数注意的问题 1、vue路由如果传递params定义路由的时候是/路由名称:id获取的时候this.$route.params.id最后形如/路由名称/路由参数传参的时候params:{str1:str1,str2:str2}2、如果

标签: 请简述vue-router路由的作用

本文链接地址:https://www.jiuchutong.com/biancheng/375898.html 转载请保留说明!

上一篇:Vue组件开发之LeanCloud带图形校验码的短信发送功能(vuejs组件开发实例)

下一篇:vue实现仿淘宝结账页面实例代码(vue仿知乎)

  • 股权转让中土地房产占比较大时怎么交税
  • 个人所得税手续费返还时间
  • 城市维护建设税优惠政策
  • 本年利润总分类账图片
  • 坏账准备需要计提成本吗
  • 开票地址一定要写全吗
  • 从价计征房产税怎么算 原值和出租房原值
  • 取用备用金要188分
  • 交通运输行业属于什么性质
  • 政府奖励企业如何申请
  • 开票时显示没有原票抄报信息
  • 会计凭证传递的终点是
  • 公司会计怎么做
  • 分配本月职工薪酬会计分录该怎么做合适?
  • 经营杠杆系数分类
  • 长期借款按月计提
  • 分公司增值税如何缴纳增值税
  • 增值税检查调整科目已经删除
  • 实际发生额大于账载金额
  • 农产品收购发票怎么抵扣
  • 一般纳税人注销需要多少钱
  • 试运营和正式运营间隔
  • 收到教育费附加返还款现金2000元会计分录
  • 单位代收员工退休金会计分录
  • 商会会费收取
  • 股权代持分红免税吗
  • 投资预算的编制方法
  • 五险一金的会计分录怎么写
  • win10 kb5005611
  • 怎样升级智慧中小学版本软件
  • 未形成固定资产的项目卖出怎么入账
  • PHP:xml_set_end_namespace_decl_handler()的用法_XML解析器函数
  • php-mbstring
  • 向国外个人支付的佣金是否缴纳个人所得税
  • PHP:pg_lo_export()的用法_PostgreSQL函数
  • 穿墙路由器怎么选择
  • 有形动产租赁税收优惠
  • 自定义max函数
  • 股权收购账务处理
  • 管理费用只能在借方吗
  • 销售商品的折扣
  • python缩进有什么作用
  • 纳统全称
  • 房产公司业务招待费扣除政策
  • 公司购买食品如何入账科目
  • 预付开发票加油后还能开吗?
  • sql server 2005 win10
  • 累计预扣法利弊
  • 代扣代缴的个税可以税前扣除吗
  • 个人餐饮费发票
  • 有限合伙企业中有限合伙人承担责任的方式为
  • 销售免税农产品的会计分录
  • 转让无形资产的收入应计入什么科目
  • 发票拿到了怎样作废
  • 收到车辆购置税发票怎么做账
  • 项目资本金如何确定
  • 销项税红字发票如何做账
  • 施工企业主营业务收入二级科目有哪些
  • 会计调账情况模板
  • sql server数据库怎么导出
  • win7系统打开网页出现file not found
  • 微软软件怎么用
  • ubuntu 安装zsh
  • Solaris 10.0 cvs的安装方法
  • win10系统如何添加隐藏wifi
  • linux ...
  • 在windowsxp中设置控制计算机硬件设备
  • win10系统自带的浏览器叫什么
  • opengl画点
  • jquery九宫格抽奖
  • 安卓开发框架mvvm
  • shell脚本-lt
  • android加载dex
  • 获取本地ip地址失败
  • Please ensure that adb is correctly located at 'D:Androidandroid-sdkplatform-toolsadb.exe' and
  • java的file类的常用操作
  • jquery下拉列表框
  • 简述activity的生命周期中有哪几种状态
  • 税务干部提升工作能力
  • 电力营销岗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设