在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. jquery获取自定义属性的值

    //获取属性值 1 <div id="text" value="黑哒哒的盟友"><div> jQuery取值: $("#tex ...

  2. Mysql 分库分表方案

    0 引言 当一张表的数据达到几千万时,你查询一次所花的时间会变多,如果有联合查询的话,我想有可能会死在那儿了.分表的目的就在于此,减小数据库的负担,缩短查询时间. mysql中有一种机制是表锁定和行锁 ...

  3. [洛谷P3697]开心派对小火车

    题目:洛谷P3697 题目大意是有各站停列车(慢车,相邻2站时间A)和特急列车(相邻2站时间B),特急列车在特定站点停靠. 现在加一种快速列车(相邻2站时间C,A>C>B),停靠K站(包括 ...

  4. Linux red hat 核心版下安装Nginx

    不要安装核心版的Linux,不要安装核心版的Linux,不要安装核心版的Linux重要的事情要说3遍.心血来潮突然想在Linux下安装Nginx,但是在安装的国程中发现了很多问题.nginx 基本安装 ...

  5. 2019-03-20 用SSIS把Excel中的数据导出来保存到SQLServer中

    Control Flow 1.配置 好 图形 2.去变量那 配置好 文件路径 和 存储过程 3.在SQL Server创建对应的存储过程,该存储过程的功能是每次导入是清空原有的数据 4.如果不懂的参考 ...

  6. jenkins 安装遇到的坑

                        最后启用安全的时候遇到一点坑,直接写了一个用户上去,没有勾选权限,然后在登录就说没有 overright/等,然后需要修改配置文件conf.xml 在主目录下. ...

  7. POJ 3696

    这里面的一个转换的小技巧很重要,把888...8转换成(10^x-1)/9*8.神来之笔,佩服. 这样有(10^x-1)/9*8=L*p得10^x-1=L*p*9/8,设m=9*L/gcd(L,8). ...

  8. ORA-01733: virtual column not allowed here

    基表: hr.tt  scott.tt  视图1: 基于 hr.tt  union all  scott.tt ---> scott.ttt  视图2: 基于 视图1->scott.ttt ...

  9. nyoj--814--又见拦截导弹(动态规划+贪心)

    又见拦截导弹 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描述 大家对拦截导弹那个题目应该比较熟悉了,我再叙述一下题意:某国为了防御敌国的导弹袭击,新研制出来一种导弹拦截系 ...

  10. [jzoj 6086] [GDOI2019模拟2019.3.26] 动态半平面交 解题报告 (set+线段树)

    题目链接: https://jzoj.net/senior/#main/show/6086 题目: 题解: 一群数字的最小公倍数就是对它们质因数集合中的每个质因数的指数取$max$然后相乘 这样的子树 ...