刚开始接触vue的时候有很长一段时间被router-view的渲染困扰着,不知道为什么明明有很多router-link和不同的router-view,但是为什么渲染的时候不会出现错乱呢

这是我自己写的一个demo

左侧是一级路由,右边显示的是一级路由对应的组件右边中first中含有二级路由

 routes: [
{
path: '/',
name: 'first',
component: first
},{
path: '/first',
name: 'first',
component: first,
children:[{
path:'/one',
name:'one',
component:one
},{
path:'/two',
name:'two',
component:two
},{
path:'/three',
name:'three',
component:three
}]
}

以上是路由的配置,其中first对应一个router-view

<template>
<div id="app">
<sidebar />
<router-view/>
</div>
</template>

first下边的子路由对应着一个router-view

<template>
<div id="content">
<div>这是第一个工作区</div>
<router-link to="/one">first-one</router-link><br>
<router-link to="/two">first-two</router-link><br>
<router-link to="/three">first-three</router-link>
<router-view></router-view>
</div>
</template>

这样页面中存在两个router-view,但是渲染不会出现混乱原因是路由的级别不同,所处的组件不相同,渲染的时候是在同级进行渲染的

同级中不存在多个router-view的时候不会出现渲染混乱,但是当同级中出现多个router-view的时候就会出现混乱,解决方法就是使用命名视图

<div id="app">
<sidebar />
<router-view name="a"></router-view>
<router-view name="b"></router-view>
</div>

在路由的配置中,设置对应路径下对应router-view显示的组件

 routes: [
{
path: '/',
name: 'first',
components: {
b: third,
a: second
}
}

现在设置的根目录下第一个和第二个视图分别显示的是second和third组件

vue-router中的router-view的困扰的更多相关文章

  1. vue.js 中this.$router.push()的使用

    在vue项目中,跳转可以用router-link直接跳到某个页面 因为有时候会需要做一些判断等情况,所以要用到 this.$router.push() 因为外链跳转根本就不在router的设计考虑范围 ...

  2. Vue中美元$符号的意思与vue2.0中的$router 和 $route的区别

    vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...

  3. vue 中router.go;router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

  4. vue中使用router全局守卫实现页面拦截

    一.背景 在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最 ...

  5. vue中的$router 和 $route的区别

    最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...

  6. Vue router中携带参数与获取参数

    Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...

  7. Vue中this.$router.push(参数) 实现页面跳转

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串 ...

  8. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  9. vue中的router和route有什么区别?

    我只知道前者一般用在跳转路由的时候,push一个url, 而后者则用来存储路由跳转过程中存储的各种数据. 话不多说,这篇博客讲的比较详细,可以参考一下. vue2.0中的$router 和 $rout ...

  10. vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题

    转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...

随机推荐

  1. 福昕PDF高级企业版编辑器9.5 Foxit PhantomPDF Business安装破解教程

    title: "福昕PDF高级企业版编辑器9.5 Foxit PhantomPDF Business安装破解教程" categories: soft tags: soft auth ...

  2. MySQL应用报错:java.sql.SQLException: Lock wait timeout exceeded; try restarting transaction

    开发反馈,某业务系统插入一条记录的时候,日志报错,插入失败: ### Error updating database. Cause: java.sql.SQLException: Lock wait ...

  3. docker配置阿里云的仓库源以及安装docker-compose

    [root@localhost mnt]# cat /etc/docker/daemon.json { "registry-mirrors": ["https://3la ...

  4. ES6 - 字符串的扩展(模版字符串)

    模板字面量的最简单语法,是使用反引号( `)(Tab上面那个键)来包裹普通字符串,而不是用双引号或单引号. <!DOCTYPE html> <html lang="en&q ...

  5. 几个简单易用的IDEA快捷键

    常见的几个Idea的代码快捷键 格式化代码: Ctrl + Alt + L Optimize Imports(优化包引用): Ctrl-Alt-O 单行注释(//): Ctrl-/ 块注释(/*... ...

  6. spring与springMVC的父子容器关系

    背景和概述 在spring与springMVC中通过IOC可以管理bean对象,有两个配置文件可以配置ioc spring的配置文件applicationContext.xmlspringMVC的配置 ...

  7. Linux远程连接ssh工具(FinalShell)xshell替代神器

    对对对 FinalShell SSH工具,服务器管理,远程桌面加速软件,支持Windows,macOS,Linux,版本2.9.8,更新时间2019.6.19 wntr 2017-01-17 11:0 ...

  8. Java12新特性 -- 增强G1,自动返回未用堆内存给操作系统

    Java 12 中增强了 G1 垃圾收集器关于混合收集集合的处理策略,这节主要介绍在 Java 12 中同时也对 G1垃圾回收器进行了改进,使其能够在空闲时自动将 Java 堆内存返还给操作系统,这也 ...

  9. spring cloud java: 无法访问redis.clients.jedis.JedisPoolConfig 找不到redis.clients.jedis.JedisPoolConfig的类文件

    spring cloud <spring-cloud.version>Greenwich.SR3</spring-cloud.version> 注入Redis 时候: @Bea ...

  10. Java的面向对象的原则

    1.单一职责原则: /* * (有且只有一个引起功能变化的原因) * 如果在一个类中,承载的功能越多. * 交融的耦合性越高,被复用的可能性越低. * 耦合性高的话,当一个类的职责发生变化的时候,会引 ...