在Vue中动态挂载组件

首先需要安装  cnpm install vue-router --save

在main.js中引入VueRouter 并使用

定义一个路由

创建router实例

通过router配置参数注入路由

关于嵌套路由

要在嵌套的出口中渲染组件，在需要VueRouter的参数中使用children配置：

college和major属于home的子路由

路由匹配的组件会显示在这里

 

Vue中路由的使用的更多相关文章

  1. vue中路由按需加载的几种方式

    使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...

  2. vue中路由返回上一个页面,恢复到上一个页面的滚动位置

    第一步:路由文件的配置(对你所需要的vue文件进行保存缓存标志的添加) import Vue from 'vue' import Router from 'vue-router' import Hel ...

  3. vue中路由

    关于每次点击链接都要刷新页面的问题众所周知,开发单页应用就是因为那丝般顺滑的体验效果,如果每次点击都会刷新页面… 出现这个的原因是因为使用了window.location来跳转,只需要使用使用rout ...

  4. vue中路由传值url--路径传值

    在vue项目中我们使用路径的方式一般有一下两种方式this.$route.params.userId;一种需要在router上配置对应的数据key, this.$route.query.userId;

  5. vue中路由拦截无限循环的情况

    router.beforeEach(async (to, from, next) => { if (token) { if (whiteList.indexOf(to.path) != -1) ...

  6. Vue中路由的嵌套

    import Vue from 'vue'; import App from './App.vue'; //引入公共的scss 注意:创建项目的时候必须用scss import './assets/c ...

  7. vue中路由传参的方式

    一.params的类型: 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abc 通过:to字符串拼接的 ...

  8. vue中路由懒加载实现amd加载文件

    一般我们配置路由的时候是import引入: import log from '@/components/login': { path: '/login', component: log , hidde ...

  9. vue中路由跳转的底层原理

    前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来.改变浏览器地址而不向服务器发出请求有两种方式: 1. 在地址中加入#以欺骗浏览器,地址的改变是由于正在进行页内导航 2. 使用H5的wind ...

随机推荐

  1. XML教程！

    什么是XML? XML是指可扩展标记语言(eXtensible Markup Language),它是一种标记语言,很类似HTML.它被设计的宗旨是传输数据,而非显示数据.XML标签没有被预定义,需要 ...

  2. Oracle查询优化之减少统计的数据量

    统计各部门人数很简单,通过部门分组即可,要统计部门以下下级部门的人数也简单,通过递归.要统计所有有下级部门的部门人数(包含下级)页比较简单, 先查询出有下级的部门,在对每个部门进行递归查询,如下: ) ...

  3. [Atcoder Code Festival 2017 Qual B Problem F]Largest Smallest Cyclic Shift

    题目大意:给你\(A\)个a,\(B\)个b,\(C\)个c,要你构造一个字符串,使它的最小循环表示法最大.求这个表示法.解题思路:不知道怎么证,但把a.b.c当做单独的字符串扔进容器,每次把字典序最 ...

  4. java实现随机数的生成

    一,课程中的动手动脑的问题 1,编写一个方法,使用以上算法生成指定数目的随机整数. public void suiJiShu(){ Scanner input=new Scanner(System.i ...

  5. s5pv210 fimc 之 fimc-dev.c

    fimc-dev.c 是Samsung FIMC 设备的V4L2 驱动.上层应用直接操作这个设备,进行capture,图片处理,以及overlay输出 http://blog.csdn.net/cxw ...

  6. 小学生都能学会的python(函数的进阶)

    小学生都能学会的python(函数的进阶) 1. 动态传参 形参: 1. 位置参数 2. 默认值参数 3. 动态传参 *args 动态接收位置参数 **kwargs 动态接收关键字参数 def fun ...

  7. ActiveMQ_Windows和Linux版本的安装部署

    1, 保证电脑上安装了jdk6以上版本的java,并配置了好环境变量 : 2, 官方下载地址:http://activemq.apache.org/download-archives.html ,这里 ...

  8. POJ——T1789 Truck History

    http://poj.org/problem?id=1789 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 27597   ...

  9. Tomcat远程代码执行漏洞(CVE-2017-12615)修复

    一.漏洞介绍 2017年9月19日,Apache Tomcat官方确认并修复了两个高危漏洞,其中就有Tomcat远程代码执行漏洞,当存在漏洞的Tomcat运行在Windwos主机上,且启用了HTTP ...

  10. HTML5与后台服务器的数据流动问题

    编辑中,尚未完稿...2017.7.14 1345 很多前端开发出来的HTML5可能对于后台开发者来说,并不是很清楚,也许像我一样一知半解.而且真的让人很糊涂的地方就是前端的JS如何与后端的数据库进行 ...