• 后端路由:对于普通的网站,所有的超链接都是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. ISO/IEC 9899:2011 条款6.4.8——预处理数字

    6.4.8 预处理数字 语法 1.pp-number: digit .    digit pp-number    digit pp-number    identifier-nondigit pp- ...

  2. It’s worth noting值得注意的是

    It’s worth noting that in JavaScript applications the Model is often connected via Ajax to a back-en ...

  3. Linux C Socket编程:文件上传

    一个服务端等待, 客户端上传文件到服务端,通过输入要上传的文件名,目前只做到仅对当前执行文件的目录下的文件,应该在服务端收到文件路径之后进行处理的. 服务端代码: #include <netin ...

  4. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_20-认证接口开发-接口测试

    测试接口 因为继承了spring  security会拦截这个请求,我们需要写代码 让他对这个认证接口放行 查看代码发现之前已经写过放行的代码了 发现是路径前面少了auth 加断点,测试.申请令牌 r ...

  5. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_17-认证接口开发-申请令牌测试

    远程 调用Spring Security来申请令牌,然后把申请到令牌存储到redis里面 cookieMaxAge: ‐1   -1表示浏览器一关闭cookie就失效. 测试远程申请令牌 TestCl ...

  6. Qt编写自定义控件58-直方对称图

    一.前言 本控件也非原创控件,是参考网上的代码而来的,对称顾名思义就是将画布平均成上下两部分,将设置的值自动按照画布高度的一半作为参照高度进行绘制,然后增加动态过渡效果,有点类似于声音播放时候的频谱效 ...

  7. CentOS7下搭建SVN服务器

    (1).安装SVN 1)安装SVN [root@youxi1 ~]# yum -y install subversion mod_dav_svn [root@youxi1 ~]# cat /etc/s ...

  8. Python sys.path永久添加

    在用户目录下,找到隐藏文件.bashrc 或 .zshrc 文件然后在末尾添加 export PYTHONPATH=$PYTHONPATH:/home/dev/custom_path 操作:vim . ...

  9. Python 面向对象总结

    面向对象 类 class 类型 类变量 实例方法 init attack bite 类指针 - 指向父类 对象 对象指针 实例变量 self.name slef.age 组合 一个对象作为一个属性 s ...

  10. python while循环 - python基础入门(9)

    经过昨天的学习,相信大家已经对 python的条件判断表达式if/else 有一定的了解了,那么我们今天配合昨天的课程讲解一个新概念 – while循环 . 都说程序源于生活,假如有这样一个场景:老师 ...