在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. 记录——本地minikube安装ubuntu镜像总是报 Back-off restarting failed container问题 -已解决（更新）

    1.环境介绍 使用本机系统:macX minikube镜像:安装的阿里云提供的镜像(否则总是提示访问google的api,不FQ无法成功) 虚拟机情况:使用Virtual box 的虚拟机环境 min ...

  2. sklearn学习8-----GridSearchCV(自动调参）

    一.GridSearchCV介绍: 自动调参,适合小数据集.相当于写一堆循环,自己设定参数列表,一个一个试,找到最合适的参数.数据量大可以使用快速调优的方法-----坐标下降[贪心,拿当前对模型影响最 ...

  3. 学习SCSS

    目录 变量 嵌套 引入 混合 继承 操作符 CSS扩展 嵌套属性 标签(空格分隔): 未分类 变量 变量用来存储需要在CSS中复用的信息,例如颜色和字体.SASS通过$符号去声明一个变量. $font ...

  4. Vue双向绑定原理（源码解析）---getter setter

       Vue双向绑定原理      大部分都知道Vue是采用的是对象的get 和set方法来实现数据的双向绑定的过程,本章将讨论他是怎么利用他实现的. vue双向绑定其实是采用的观察者模式,get和s ...

  5. 20130910.Windows上安装和配置MongoDB

    官方文档:http://docs.mongodb.org/manual/tutorial/ 1.下载软件 http://www.mongodb.org/downloads 2.解压 解压后进入bin目 ...

  6. ASP.NET-Active Direcotry编程示例

    查找指定的AD帐号 using (DirectoryEntry de = new DirectoryEntry("LDAP://RootDSE")) { string DCName ...

  7. 8个超实用的Java测试工具和框架

    Java入门 如果你才刚开始接触Java世界,那么要做的第一件事情是,安装JDK——Java Development Kit(Java开发工具包),它自带有Java Runtime Environme ...

  8. video_capture模块分析

    1. 对外接口      VideoCaptureModule     控制接口      VideoCaptureDataCallback Vie中的ViECapturer继承,用于响应抓包数据 2 ...

  9. php给图片加入文字水印

    PHP对图片的操作用到GD库.这里我们介绍怎样给图片加入文字水印. 大致分为四步: 1.打开图片 2.操作图片 3.输出图片 4.销毁图片 以下我们上代码来详细解说每步的实现过程: <? php ...

  10. Qt 3D教程（三）实现对模型材质參数的控制

    Qt 3D教程(三)实现对模型材质參数的控制 蒋彩阳原创文章,首发地址:http://blog.csdn.net/gamesdev/article/details/47131841.欢迎同行前来探讨. ...