在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. github踩坑之git命令收集与整理（windows）

    最近开始又捡起git,第一家公司用的就是git,一直掌握的也不深刻,就知道常用的几个命令,虽然现在用svn,但是觉得git还是不能丢,遂又捡起来了.先总结一部分目前练习用到的,慢慢填补吧~ githu ...

  2. 在centos6.5上升级php-libxml版本到2.9.0

    当前系统,软件版本说明: php libxml glibc 2.12 zlib xz-libs 需求: 应开发的需求,线上环境,php-libxml版本升级到2.8以上. 升级步骤:1.安装工具集 y ...

  3. mybatis中if及concat函数的使用

  4. 百度api使用说明

    .初始化地图,并设置地图中心点 复制代码 https://www.cnblogs.com/zqzjs/p/5293698.html var map = new BMap.Map("allma ...

  5. php && 运算符使用说明

    “&&” 运算符的用法: ;;echo $test;//输出:000

  6. BZOJ 1576 [USACO]安全路经Travel (树剖+线段树)

    题目大意: 给你一张无向图,求1到其他节点 不经过最短路的最后一条边 的最短路长度,保证每个节点的最短路走法唯一 神题,$USACO$题目的思维是真的好 先$dijkstra$出最短路树 对于每个节点 ...

  7. STM32 HAL库 IIC 协议库函数

    /* 第1个参数为I2C操作句柄 第2个参数为从机设备地址 第3个参数为从机寄存器地址 第4个参数为从机寄存器地址长度 第5个参数为发送的数据的起始地址 第6个参数为传输数据的大小 第7个参数为操作超 ...

  8. JavaScript 的对象继承方式，有几种写法？

    JavaScript 的对象继承方式,有几种写法? 一.对象冒充 其原理如下:构造函数使用 this 关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使 Pa ...

  9. RabbitMQ学习总结（3）——入门实例教程详解

    一.起航 本章节,柯南君将从几个层面,用官网例子讲解一下RabbitMQ的实操经典程序案例,让大家重新回到经典"Hello world!"(The simplest thing t ...

  10. C++ throw的实验 & 异常类继承关系

    如果定义了 throw() 表示函数不抛出异常,这时候如果还是抛出,会导致运行时错误. #include <iostream> #include <exception> #in ...