• 后端路由:对于普通的网站,所有的超链接都是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. MySql 里的IFNULL用法

    IFNULL(expr1,expr2)的用法: 假如expr1 不为 NULL,则 IFNULL() 的返回值为 expr1; 否则其返回值为expr2.IFNULL()的返回值是数字或是字符串,具体 ...

  2. 123457123456#0#-----com.twoapp.KidsShiZi01--前拼后广--儿童宝宝识字jiemei

    com.twoapp.KidsShiZi01--前拼后广--儿童宝宝识字jiemei

  3. Python基础之set集合与函数

    set集合 集合是一个无序且不重复的元素组合,以大括号表示.使用详情: >>> b=set(a) >>> type(b) <class 'set'> & ...

  4. Vue.js学习TodoMVC小Demo

    实现效果如下: 把玩了添加和删除功能,代码如下: index.html: <!doctype html> <html lang="en"> <head ...

  5. LSTM改善RNN梯度弥散和梯度爆炸问题

    我们给定一个三个时间的RNN单元,如下: 我们假设最左端的输入  为给定值, 且神经元中没有激活函数(便于分析), 则前向过程如下: 在  时刻, 损失函数为  ,那么如果我们要训练RNN时, 实际上 ...

  6. linux下的进程间通信之共享内存

    概念:这种机制允许两个或多个进程通过把公共数据结构放入一个共享内存区来访问它们.如果进程要访问这种数据结构所在的共享内存区,就必须在自己的地址空间中增加一个新线性区,新线性区映射与这个共享内存区相关的 ...

  7. selenium UI自动化解决验证码的五种方法

    TesseractPy3.py #coding=utf-8 import os import subprocess import traceback import logging from PIL i ...

  8. GPU Skinning 结合 Instanced 高效实现大量单位动画

    GPU Skinning 与 Instance 蒙皮动画 计算骨骼信息 蒙皮 GPU Skinning CPU Skinning 与 GPU Skinning 实现方式 Skinning 类型 优点 ...

  9. windows服务器入门 初始化数据盘

    本人在寒假的时候自行搭建了一个服务器,在此分享一下我的方法.本人服务器的系统为Windows 2012R2 在后面的讲解中中文英文都会有    所以不用在意系统的语言问题 1)第一步  自然就是打开服 ...

  10. [LuoguP1155]双栈排序_二分图_bfs

    双栈排序 题目链接:https://www.luogu.org/problem/P1155 数据范围:略. 题解: 神仙题. 就第一步就够劝退了. 这个二分图非常不容易,首先只有两个栈,不是属于一个就 ...