在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. 使用短信猫读取短信java代码

    短信猫简单配置:https://www.cnblogs.com/Big-Boss/p/9699880.html 测试发送短信代码:https://www.cnblogs.com/Big-Boss/p/ ...

  2. 【WPF】这可能是全网最全的拖拽实现方法的总结

    原文地址 https://www.cnblogs.com/younShieh/p/10811456.html 前文 本文只对笔者学习掌握的一般的拖动问题的实现方法进行整理和讨论,包括窗口.控件等内容的 ...

  3. react-redux源码解析(资料)

    资料:https://www.cnblogs.com/hhhyaaon/p/5863408.html 感觉很棒,记录一下

  4. Unity 多场景打包

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50580641 作者:car ...

  5. 前端和后台对接时对sign加密方法

    前端和后台对接时对sign加密方法 /*后台php对接进行sign标签加密 1 获取向后台请求的数据data(key/value方式),可以是个对象(obj),也可以是数组(arr); 2 将数据的k ...

  6. MyBatis学习总结（18）——MyBatis与Hibernate区别

    也用了这么久的Hibernate和MyBatis了,一直打算做一个总结,就他们之间的优缺点说说我自己的理解: 首先,Hibernate是一个ORM的持久层框架,它使用对象和我们的数据库建立关系,在Hi ...

  7. 洛谷 P1556 幸福的路

    P1556 幸福的路 题目描述 每天,John都要为了农场里N(1≤N≤10)头牛的健康和幸福四处奔波. 每头牛的位置可以描述为一个二维坐标,John从坐标原点(0,0)出发.为了使路径更有趣,Joh ...

  8. spring-boot-maven-plugin 插件的作用（转）

    OM 文件中添加了“org.springframework.boot:spring-boot-maven-plugin”插件.在添加了该插件之后,当运行“mvn package”进行打包时,会打包成一 ...

  9. HTML---经常使用标签总结与实践

    什么是HTML? 超文本标记语言,标准通用标记语言下的一个应用.    "超文本"就是指页面内能够包括图片.链接,甚至音乐.程序等非文字元素. 超文本标记语言的结构包含" ...

  10. magento megatron主题加入中文

    magento的megatron默认不支持中文,全部我们须要在它的本地化目录中加入中文的cvs文件,加入方法例如以下: 1.切换至 app ▸ design ▸ frontend ▸ megatron ...