• 后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源
  • 前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换(不会刷新页面),同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现
  • 在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由)

路由的导入:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
 
 
路由的创建:

HTML部分
 

JavaScript部分
 

CSS部分
 

路由规则中定义参数:query(路由配置规则中的path属性不用修改)
                                    params
 
 
 
 
 

子路由:
 
 

同时展示多个组件:
 
 

vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件的更多相关文章

  1. vue初始化、数据处理、组件传参、路由传参、全局定义CSS与JS、组件生命周期

    目录 项目初始化 组件数据局部化处理 子组件 父组件 路由逻辑跳转 案例 组件传参 父传子 子组件 父组件 子传父 子组件 父组件 组件的生命周期钩子 路由传参 第一种 配置:router/index ...

  2. webpack+vue 组件间传参(单一事件中心管理组件通信--$root),如果有路由的话会失效

    先给一个例子: <body> <div id="box"> <com-a></com-a> <com-b></co ...

  3. vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

    Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...

  4. vue的父子组件间的相互传参props及props数据的多种验证机制

    感觉自己即将完全步入前端大军,后台老板都不需要我弄了,塞翁失马...时间会告诉我们是好是坏 好了言归正传,最近vue是搞的不亦乐乎啊,下面来总结一下vue组件间的各种使用方法以及一些技巧 ------ ...

  5. vue传参子传父

    vue子传父用$emit实现 1.文件目录结构 2.parent父组件内容 <template> <div class="wrap"> <div> ...

  6. Vue 父组件方法和参数传给子组件的方法

    <template> <div class="content-item"> <!-- openWnd是父组件自身的方法,openDutyWnd是子组件 ...

  7. vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为

    vue-router4 出现 No match found for location with path "/" #### router/index.ts文件 import { c ...

  8. window.open() 打开的子页面 往主页面传参问题

    <!--主页面的代码--><!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. vue学习之组件

    组件从注册方式分为全局组件和局部组件. 从功能类型又可以分为偏视图表现的(presentational)和偏逻辑的(动态生成dom),推荐在前者中使用模板,在后者中使用 JSX 或渲染函数动态生成组件 ...

  10. vue学习时遇到的问题(二)

    1. this.$nextTick veu中进行数据改变后,并不会马上刷新视图:用nextTick可告诉执行下个函数后马上刷新视图: this.$nextTick(function(){     // ...

随机推荐

  1. OS X环境下如何搭建编译Cocos2D-X v3.x的Android Studio工程

    Cocos2D-X官网已经简单介绍了如何在OS X环境下搭建Cocos2D-X v2.x和v3.x的指南.具体链接为:http://www.cocos.com/doc/article/index?ty ...

  2. jmeter 查看结果树,获取响应体写法校验是否提取写法是否正确的方法

    JSON Path Expression里面写入提出值的写法,点击Test测试提取

  3. ElasticSearch——原始文档和倒排索引

    一.原始文档 如上图所示, 第二象限是一份原始文档,有title和content2个字段,字段取值分别为”我是中国人”和” 热爱共X产党”,这一点没什么可解释的.我们把原始文档写入Elasticsea ...

  4. (一)java面试易忘题目精选(1)

    1. int和Integer有什么区别? 答:Java是一个近乎纯洁的面向对象编程语言,但是为了编程的方便还是引入了基本数据类型,但是为了能够将这些基本数据类型当成对象操作,Java为每一个基本数据类 ...

  5. 【c# 学习笔记】类实例化

    类中可以定义的成员,包括字段.属性.构造函数.实例方法和析构函数等. 要访问这些实例成员,必须通过类的实例对象来完成.而要得到一个类的实例对象,就必须先声明一个该类类型的变量,然后使用new运算符后跟 ...

  6. 使用SWO代替UART,实现Printf打印功能

    JTAG接口中,有个SWO引脚,一直没有在意,也没有去研究过是干嘛用的.直到发现ST-LINK V2-1上也有个SWO引脚,于是去研究学习它的作用,用起来相比UART方得便多. 本文内容已经整理成PD ...

  7. SQL 语句是如何执行的

    SQL 语句是如何执行的,虽然SQL是声明式语言,我们可以像使用英语一样使用它,不过在RDBMS(关系型数据库管理系统)中,SQL的实现方式还是有差别的.极客教程从数据库的角度来思考一下SQL是如何被 ...

  8. 李宗盛 linux罚写

    1.system v init运行级别及作用 init运行级别 作用 0 关机 1 单用户模式 2 多用户的文本界面 3 多用户的文本界面 4 多用户的文本界面 5 多用户的图形界面 6 重启 eme ...

  9. 【ARM-Linux开发】DRM学习(一)

    http://www.landley.NET/kdocs/htmldocs/drm.html 非常好的一个链接,直接把DRM说的很透.很多API的功能都写全了. Table of Contents 1 ...

  10. Go之接口interface(1)

    1. 什么是interface在此之前,我们遇到的都是具体的类型,比如数字类型.切片类型等等.对于这些具体的类型,我们总是能知道它是什么.可以利用它来做什么,比如对于一个数字类型,我们知道可以对其进行 ...