vue路由详解版一目了然

概念

路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。
那么url地址和真实的资源之间就有一种对应的关系,就是路由。

路由分为前端路由和后端路由
1).后端路由是由服务器端进行实现,并完成资源的分发
后端路由性能相对前端路由来说较低,所以,我们接下来主要学习的是前端路由
2).前端路由是依靠hash值(锚链接)的变化进行实现
前端路由的基本概念:根据不同的事件来显示不同的页面内容,即事件与事件处理函数之间的对应关系
前端路由主要做的事情就是监听事件并分发执行事件处理函数

Vue Router

简介

它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器,推荐使用。
Vue Router和Vue.js非常契合,可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。

Vue Router依赖于Vue,所以需要先引入Vue,再引入Vue Router

Vue Router的特性

支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为

Vue Router的使用步骤

  1. 导入js文件

    <script src="lib/vue_2.5.22.js"></script>
    <script src="lib/vue-router_3.0.2.js"></script>
    
  2. 添加路由链接:是路由中提供的标签,默认会被渲染为a标签,to属性默认被渲染为href属性,to属性的值会被渲染为#开头的hash地址

    <router-link to="/user">User</router-link>
    
  3. 添加路由填充位(路由占位符)

    <router-view></router-view>
    
  4. 定义路由组件

    var User = { template:"<div>This is User</div>" }
    
  5. 配置路由规则并创建路由实例

    var myRouter = new VueRouter({//routes是路由规则数组routes:[//每一个路由规则都是一个对象,对象中至少包含path和component两个属性//path表示  路由匹配的hash地址,component表示路由规则对应要展示的组件对象{path:"/user",component:User},{path:"/login",component:Login}]
    })
    
  6. 将路由挂载到Vue实例中

    new Vue({el:"#app",//通过router属性挂载路由对象router:myRouter
    })
    

补充:
路由重定向:可以通过路由重定向为页面设置默认展示的组件
在路由规则中添加一条路由规则即可,如

var myRouter = new VueRouter({//routes是路由规则数组routes: [//path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址,设置为一个路由即可{ path:"/",redirect:"/user"},{ path: "/user", component: User },{ path: "/login", component: Login }]
})

分类

嵌套路由

嵌套路由最关键的代码在于理解子级路由的概念:
比如我们有一个/login的路由
那么/login下面还可以添加子级路由,如:
/login/account
/login/phone
在这里插入图片描述

动态路由

在这里插入图片描述
补充:
1.我们可以通过props来接收参数
在这里插入图片描述
2、还有一种情况,我们可以将props设置为对象,那么就直接将对象的数据传递给
组件进行使用
在这里插入图片描述
3、如果想要获取传递的参数值还想要获取传递的对象数据,那么props应该设置为
函数形式。
在这里插入图片描述

命名路由

给路由取别名
在这里插入图片描述

编程式导航

调用js的api方法实现导航
在这里插入图片描述

写在最后

原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}

👍 点赞,你的认可是我创作的动力!\textcolor{green}{点赞,你的认可是我创作的动力!}

⭐️ 收藏,你的青睐是我努力的方向!\textcolor{green}{收藏,你的青睐是我努力的方向!}

✏️ 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248535.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

go语言环境搭建

1、windows环境搭建   1、安装go   2、安装goland开发工具包 2、test.go /* 可执行文件&#xff0c;包名必须是main */ package main /* fmt 字符串格式化的包 */ import "fmt"/*main入口函数*/ func main() { fmt.Printf("Hello, world" )} View Code…

进阶函数

一、函数对象 函数是第一类对象&#xff1a;函数名指向的值可以被当做参数传递 1.函数名可以被传递 def func():print(func)f func # 函数名可以当做变量名 print(f) # f指向的也是函数func指向函数体代码的内存地址 2.函数名可以被当做参数传递给其他参数 def func():print…

vue脚手架基础API全面讲解【内附多个案例】

vscode-插件补充 vue文件代码高亮插件-vscode中安装 代码提示插件-vscode中安装 知识点自测 想学会今天的内容, 先测测这几个会不会 表达式, 变量是什么 new的作用和含义 实例化对象 什么是对象上的, 属性和方法 对象的赋值和取值 this的指向 npm/yarn是什么, package.json干…

mysql 和 sqlserver sql差异比较

mysql:select * from table_name limit 100,200;--取出从100到200的数据 获取时间&#xff1a;mysql:now() mysql tinyint&#xff08;0,1&#xff09; → bit float &#xff08;decimal(19,4)&#xff09;→ moneytext → ntextvarchar →nvarchar 转载于:https://www.cnblo…

Vue 过滤器、计算属性、侦听器 图解版 一目了然

文章目录本篇学习目标1. vue基础1.0_vue基础 v-for更新监测1.1_vue基础_v-for就地更新1.2_vue基础_虚拟dom1.3_vue基础_diff算法情况1: 根元素变了, 删除重建情况2: 根元素没变, 属性改变, 元素复用, 更新属性1.4_vue基础_diff算法-key情况3: 根元素没变, 子元素没变, 元素内容…

linux shell命令行选项与参数用法详解

问题描述&#xff1a;在linux shell中如何处理tail -n 10 access.log这样的命令行选项&#xff1f;在bash中&#xff0c;可以用以下三种方式来处理命令行参数&#xff0c;每种方式都有自己的应用场景。1&#xff0c;直接处理&#xff0c;依次对$1,$2,...,$n进行解析&#xff0c…

Vue自定义指令原来这么简单

本篇学习目标 能够了解组件进阶知识能够掌握自定义指令创建和使用能够完成tabbar案例的开发 1. 组件进阶 1.0 组件进阶 - 动态组件 目标: 多个组件使用同一个挂载点&#xff0c;并动态切换&#xff0c;这就是动态组件 需求: 完成一个注册功能页面, 2个按钮切换, 一个填写注册…

重载(overload)与重写(override)的区别

overload&#xff08;重载&#xff09;:在同一个类中&#xff0c;方法名相同&#xff0c;参数列表不相同。与返回值类型无关。 override&#xff08;重写&#xff09;:存在同一个类中&#xff0c;或者父子接口中&#xff0c;方法名相同个&#xff0c;参数列表相同。遵循“两同两…

python学习,day3:函数式编程,*arge,**kwargs

对于不固定长度的参数&#xff0c;需要使用*arge&#xff0c;**kwargs来调用&#xff0c;区别是*arge是转换为元组&#xff0c;而kwargs转化为字典 # codingutf-8 # Author: RyAn Bi def test(*args): #参数组print(args)test(1,2,4,6,7,8) #方式1 test(*[1,2,4,5,6]) #方式2 #…

那些被人忽略的Vue导航知识

本篇学习目标 能够了解单页面应用概念和优缺点能够掌握vue-router路由系统使用能够掌握链接导航和编程式导航用法能够掌握路由嵌套和路由守卫能够掌握vant组件库基础使用 1. vue路由简介和基础使用 1.0 什么是路由 目标: 设备和ip的映射关系 目标: 接口和服务的映射关系 目…

passwd命令

-n 在这几天你不能更改密码&#xff01; -x 在n<时间<x在这段时间内你必须修改密码&#xff01; -w 当距离x日期还有w天的时候开始提醒你改密码&#xff01; -i 密码过期i天之后&#xff0c;此密码停用&#xff0c;你也就无法用此密码登陆这个用户了。注意是密码过期之后…

一文带你吃透Vue生命周期(结合案例通俗易懂)

文章目录本篇学习目标1. vue生命周期1.0_人的-生命周期1.1_钩子函数1.2_初始化阶段1.3_挂载阶段1.4_更新阶段1.5_销毁阶段2. axios2.0_axios基本使用2.1_axios基本使用-获取数据2.2_axios基本使用-传参2.3_axios基本使用-发布书籍2.4_axios基本使用-全局配置3. nextTick和nextT…

[SCOI2012]滑雪 (最小生成树 Kruskal)

题目描述 a180285非常喜欢滑雪。他来到一座雪山&#xff0c;这里分布着M条供滑行的轨道和N个轨道之间的交点&#xff08;同时也是景点&#xff09;&#xff0c;而且每个景点都有一编号i(1≤i≤N)和一高度Hi​。a180285能从景点ii滑到景点j当且仅当存在一条i和j之间的边&#xf…

来学习ansibie(1)

# ansible 批量在远程主机上执行命令 python2.7编写 ## 安装 第一步:下载epel源 shellwget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo 第二步:安装 shellyum install -y ansible ## ansible 命令格式 shellUsage: ansible <host-pattern&g…

CQYZOJ P1392 拔河问题

题目\(1\) Description 一个学校举行拔河比赛&#xff0c;所有的人被分成了两组&#xff0c;每个人必须&#xff08;且只能够&#xff09;在其中的一组&#xff0c;且两个组内的所有人体重加起来尽可能地接近. Input 第\(1\)行是一个\(n\)&#xff0c;表示参加拔河比赛的总人数…

灵活的Vue组件——原来这么简单

本篇学习目标 能够理解vue组件概念和作用能够掌握封装组件能力能够使用组件之间通信能够完成todo案例 1. vue组件 1.0_为什么用组件 以前做过一个折叠面板 需求: 现在想要多个收起展开的部分 方案1: 复制代码 代码重复 冗余不利于维护 案例用less写的样式, 所以下载 ya…

FOI冬令营 Day 3

目录 T1、签到题&#xff08;sort&#xff09;传送门 Code T2、送分题&#xff08;queue&#xff09;传送门 Code T3、简单题&#xff08;game&#xff09;传送门 Code 咕咕咕T1、签到题&#xff08;sort&#xff09; 传送门 原题&#xff1a;LOJ 2767 Code //2019/2/14 //50…

委托事件观察者模式

委托的默认返回类型&#xff1a;void 声明委托的关键字&#xff1a;delegate 多播委托&#xff1a;将多个方法绑定到一个委托变量 在调用方法时 可以执行绑定的方法 委托的描述&#xff1a; 委托是一个类 定义了方法的类型 可以将方法当做另一个方法进行传递 委托并不等同于方法…

赢在CSDN——名利兼收

文章目录&#x1f30a; 相识CSDN&#x1f30a; 益于CSDN流量将成为你我的亮点我的专栏收益到账啦学习会员助你拿捏专栏更多曝光自己的机会CSDN问答为你准备的零花钱&#x1f30a; 忠于CSDN&#x1f30a; 相识CSDN 小编自注册CSDN至今两年有余&#xff0c;记得初衷也仅仅是为了…

124angular1实现无限表单(仅供自己看)

//将本行的内容对象作为参数&#xff0c;传给点击函数&#xff0c;点击函数向后台发送请求&#xff0c;把获取的返回值作为内容对象的一个属性。 (function (angular) {angular.module(myModule, []).directive(treeModel, [$compile, function ($compile) {return {restrict: …