在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. Appstore排名前十的程序员应用软件

    程序员又名程序猿,苦逼劳累的代名词,曾经一个朋友这么开玩笑说,如果你是富二代,你当程序员就是脑残,如果你是穷二代,当程序员的话,死的时候一定是趴键盘. 程序员 哦,可怜的程序员.在那山的这边海的那边有 ...

  2. Event-driven programming-main loop

    In computer programming, event-driven programming is a programming paradigm in which the flow of the ...

  3. ZBrush中2.5D笔刷

    ZBrush®是一个数字雕刻和3维建模软件,它不仅有着强大的3D雕刻功能,对于2.5D笔刷的应用也毫不逊色.本文主要讲解2.5D笔刷的一些使用方法,2.5D笔刷是针对贴图绘画的增效画笔工具和其他一些工 ...

  4. Java之Object类

    0 引言 Object类是类层次结构的根,Java中所有的类从根本上都继承自这个类.Object类是Java中唯一没有父类的类. 其他所有的类,包括标准容器类,比如数组,都继承了Object类中的方法 ...

  5. HTML特殊符号对照表、常用的字符实体

    来源:http://tool.xker.com/htmlchar.php 最常用的字符实体 显示结果 描述 实体名称 实体编号   空格     < 小于号 < < > 大于号 ...

  6. NOIP2018提高组省一冲奖班模测训练（四）

    NOIP2018提高组省一冲奖班模测训练(四) 这次比赛只AC了第一题,而且花了40多分钟,貌似是A掉第一题里面最晚的 而且还有一个半小时我就放弃了…… 下次即使想不出也要坚持到最后 第二题没思路 第 ...

  7. (转载)使用Maven构建多模块项目

    原文:https://www.cnblogs.com/xdp-gacl/p/4242221.html#undefined 在平时的Javaweb项目开发中为了便于后期的维护,我们一般会进行分层开发,最 ...

  8. SpringBoot2.0 监听器ApplicationListener的使用-监听ApplicationReadyEvent事件

    参考:http://www.shareniu.com/article/73.htm 一.需求是想将我的写一个方法能在项目启动后就运行,之前使用了redis的消息监听器,感觉可以照着监听器这个思路做,于 ...

  9. js中“原生”map

    var map = {}; // Map map = new HashMap(); map[key] = value; // map.put(key, value); var value = map[ ...

  10. Linux学习总结（16）——CentOS 下 Nginx + Tomcat 配置负载均衡

    最近在读埃隆·马斯克传记,他说「我认为现在有非常多的聪明人都在致力于互联网」. 仔细一想,好像真的是这样的. 我问了自己一个问题:如果你不敲代码了,你能做什么? 答案令人极其恐怖.吓得我赶紧又去写了一 ...