Vue-router的问题,使用路由嵌套的时候,为何子路由的内容不被渲染到router-view?

图片说明图片说明图片说明图片说明图片说明

上面白色背景的是官方的,黑色的是我的,唯一不同的地方就是官方没有使用name来命名路由。根据这种设计,点击不同名的路由,路径确实被改变了(参考图3和图4),**但是所渲染的内容都是block组件**,这是为何?二级路径,我希望渲染block2的内容。为何会出现这个问题?怎么解决?为了更好的逻辑,设计模式,尽量采用嵌套路由,如果不是嵌套路由,我有办法解决。

1个回答

首先确定有没有import了block2,其次是检查需要引入子组件的地方是否写了router-view

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Vue-router嵌套路由的使用
路由使用的时候需要设置路由的路径: ew Router({ // mode: 'abstract', routes: [ { path: '/top', component: Top }, { path: '/new', component: New }, { path: '/', redirect: '/top' } ] }) 然后设置路由要渲染的标签:
vue-router 路由 基本使用(二) ——嵌套路由
定义路由 注册路由 使用路由
vue-router—5嵌套路由的使用
about <template> <div> 关于我 <hr> <ul class="nav"> <router-link to="/about" exact tag="li"> <a>study</a> </router-link&...
vue-router嵌套路由
{ path: "/home", name: "****", meta: { title: "****" }, children: [ { path: "/test1", name: "test1", component: () =>...
Vue-Router(一) 嵌套路由
Vue-Router(一) 嵌套路由利用vue开发单页面应用有多么快捷这里就不多说了,应用界面通常由多层嵌套的组件组合而成,本文就说一下 Vue-Router 中的嵌套路由。 首先利用 vue-cli 构建一个 vue 项目(这里默认大家都已经安装了 nodeJs) 1. 安装vue-cli npm install -g vue-cli 2. 初始化vue项目 vue init
vue-router 嵌套路由
vue 路由可多级嵌套 /user/foo/profile —> /user/foo/posts const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { // 当 /user/:id/p...
vue-router嵌套路由详解
嵌套路由顾名思义就是路由的多层嵌套。 结合vue-router仿天猫底部导航栏,给组件Me添加嵌套路由,也叫子路由。 总共添加两个子路由,分别命名Collection.vue(我的收藏)和Trace.vue(我的足迹) 1、重构router/index.js的路由配置,需要使用children数组来定义子路由,具体如下: import Vue from 'vue' import Rou
vue-router: 嵌套路由
模板抽离我们已经学习过了Vue模板的另外定义形式,使用<template></template>。 <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template>然后js里定义路
vue-router嵌套+视图路由
一、嵌套路由(配置好父路由component后,在父路由下面添加children属性来配置这个父路由的子路由) 需要注意的是:父组件中的&amp;lt;router-view&amp;gt;&amp;lt;/router-view&amp;gt;是子组件的占位符是必不可少的 嵌套路由的现象:点击了路由跳转之后父路由组件的内容一直呈现;子路由的内容进行切换,地址栏的路径也随之改变。 // 嵌套路由 { ...
vue-router嵌套路由定向问题
存在这样一个路由routes: [ { path: '/home', name: 'home', component: Nav, children: [ { path: 'index', name: 'index', component: Index ...
使用 router-view 和 router-link 实现嵌套路由
嵌套路由实现左边选择右边刷新: 左边菜单栏使用:router-link 标签,右边使用 router-view 嵌套,实现路由; router-link 传参方式: 其中name 需要和 router.js 中路由对应,传入不同的 type 以区分不同的tab页面; 实现步骤: 1.app 的主路由中 这个步骤一成不变; 2.在想要实现同页面的嵌套路由的page中;再一次定义一个 route...
vue-router剖析---02嵌套路由、路由视图
可简单理解成:是一个父子路由,但是它的特色之处是   可以在父路由的指定位置显示子路由(即:将父子路由的内容在同一个模块中) 实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:  借助 vue-router,使用嵌套路由配置,就可以很简单地表达这种关系。 这里的 &amp;lt;router-view&amp;gt; 是最顶层的出...
vue-router 路由跳转和嵌套二级路由
1路由跳转 &amp;lt;router-link&amp;gt;标签中的to就是跳转的页面 router-link标签相当于a标签 2路由嵌套 在目标路由下添加children可以添加二级路由
vue-router的嵌套路由,重定向和别名
1.命名路由     有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。我个人理解就相当于给路径取个名字,调用的时候,这个名字就指这个路径,不然有些路径很长,直接写太麻烦。 const router = new VueRouter({ routes: [ ...
vue-router模式,嵌套路由、编程式路由、命名路由
一、vue-router共两种模式:hash模式(默认)、history模式 模式可通过router文件夹中的index.js文件进行设置: export default new Router({ mode:'history',//'hash'或'history' routes: [ { path: '/user/:username', name: 'He...
vue-router入门(1)—— 基本路由,动态匹配路由,嵌套路由
  本系列的第一章,按照惯例,介绍一下vue-router的设计初衷,我第一次接触到vue-router是通过vue-cli的全家桶,vue-router的设计之初是为了适应单页面应用开发,但事实上,你通过新标签页的方式去访问某个路由,和你通过当前页“跳转”到该路由,路由中所包含的信息都不会丢失,当然新标签页打开和当前页打开在某些情况下也是有区别的。(比如你打开../user/123,在通过当前页...
vue-router前端路由的使用
路由是根据不同的url展示不同的内容,前端路由就是把这个工作由服务器转到前端来做。 Vue.js+Vue-router可以很简单的实现单页应用。 单页应用 单页应用(SPA)能够更新视图而不重新请求页面。 vue-router实现单页应用主要有Hash模式和History模式,通过mode参数决定使用哪一种。默认使用Hash。 1、Hash模式: hash(#)是URL 的锚点,代表的是网页中的一...
vue-router 使用路由懒加载
原来的写法: routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] 懒加载写法: routes: [ { path: "/Index", component: resolve =&gt; require(['@/comp...
vue-router路由的基本使用
可以创建一个vue-router实例作为练习。 vue create vue-router-apply vue-router 1.安装vue-router: npm i vue-router 2.新建一个router文件夹,在里面新建一个index.js文件 import Vue from "vue"; import VueRouter from "vue-router"; // 使...
vue-router路由的使用
基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿!rn1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等)rn2. 采用笔记+代码案例的形式讲解,通俗易懂
vue-router路由安装与使用
1.vue-router路由安装 在当前项目根目录运行 npm install vue-router --save-dev 2.在App.vue增加 router-view标签 这里是路由页面的显示区域: &amp;lt;router-view&amp;gt;&amp;lt;/router-view&amp;gt; 3.新建router文件夹,新建index.js import ...
vue-router路由的基础使用
文档:http://router.vuejs.org/zh-cn/<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg
vue-router 路由的使用
安装vue-router 命令行 vue ui 打开项目仪表盘 --插件–添加–vue-router 配置vue-router 配置app.vue同级的router.js import Vue from ‘vue’ import Router from ‘vue-router’ Vue.use(Router) 导入组件A和B export default new Router({ routes: ...
vue-router路由使用
使用npm通过webpack模板创建vue工程后,会发现以下几个东西: 1、router目录下有个index.js文件 2、App.vue文件内容里面有个&amp;amp;lt; router-view /&amp;amp;gt;标签 index.js里面Router具体路由的定义,如下格式: xport default new Router({ routes: [ { path: '/', ...
Vue-router路由2.0的使用
ps:我的第一个vue项目是用vue-router 0.7.3 版本,如今升级成webpack使用vue-router 2.x 版本不会用了,找了好多论坛,总结出了几个方法 直接上干货 首先是router.js文件 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); export default new
router-view刷新父路由
watch: { '$route' (to, from) { this.$router.go(0); } }, https://blog.csdn.net/wulala_orz/article/details/78928524#commentBox原文(不过这个是页面刷新,所有的都刷新了) https://blog.csdn.net/qq_16772725/a...
Vue路由(嵌套路由)的使用
1、vue-router介绍 vue-router是Vue.js的路由插件。适合用于构建单页面应用,基于路由和组件;路由用于设定访问路径,将路径和组件映射起来。 路径之间的切换实际上就是组件的切换。 2、安装 vue-router 先要搭建vue工作环境,环境搭建请参考另外两篇:Windows下的vue工作环境搭建和linux下的vue工作环境搭建。 3、创建项目 vue init webpack...
Vue 之 vue-router 路由嵌套不显示问题
Vue 之 vue-router 路由嵌套1、路由嵌套,vue2.0 router中嵌套路由不成功我先说下我的需求,例如下图我本来是想打算将中间的模块做一层子路由(test模块),模块代码没错,每次编译都正常好使,但是打开编译后的文件之后,一直都是==只能渲染一级路由,子路由没有效果,==,查了一推资料,帖子说:子路由多写了/, 会默认从根目录开始匹配,我试着也删除掉这些东西,但是后来发现,我的
vue-router 路由 基本使用(一) ——基本路由
定义路由组件 : 在Pages 文件夹下 先构造 2 个 空页面 About.vue 和 Home.vue; 注册路由 : 在router/index.js 导入两个页面 并 构造页面的路由路径; main.js引入Vue, App和 router 模块, 实例化Vue对象;main.js引入Vue, App和 router 模块, 实例化Vue对象; 使用路由 : rou...
vue-router 路由缓存、路由传参
一、缓存路由组件对象 1、理解 1) 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的 2) 如果可以缓存路由组件对象, 可以提高用户体验 2、代码实现         &amp;lt;keep-alive&amp;gt;                 &amp;lt;router-view&amp;gt;&amp;lt;/router-view&amp;gt;         &amp;lt;/keep-alive&amp;gt...
vue-router 前端路由之路由传值
路由传值 在前端的路由里面,我们在切换路由的时候,也相当于切换了页面,页面与页面之前有时候需要做到传值 ,这个时候就需要进行路由传值,在VueRouter里面,两个路由之间做跳转的时候,如何进行传值呢? 普通跨页面传值: 通过localStorage setItem() getItem() 通过search(地址栏? 后面的参数) VueRouter的路由传值 VueRouter的路...
Vue-router 路由详解 多级路由
今天我来分享一下vue路由方面的心得体会。 文章源码位置https://github.com/JustDoIt521/originCoding/tree/master/vue-router-base 使用的脚手架为Vue3.0,IDE为VSCode 首先引入vue路由 cnpm install vue-router --save-dev 然后我们在src目录下建立文件夹router,并...
vue-router菜鸟进阶!(嵌套路由VS命名路由)
嵌套路由一个被渲染组件可以包含自己的嵌套< router-view >。要在嵌套的出口中渲染组件,需要在VueRouter的参数中使用children配置:<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></s
vue-router中定义动态路由、嵌套路由,并动态获取参数
路由的定义,主要有以下几步: 如果是模块化机制,需要调用 Vue.use(VueRouter) 定义路由组件,如: const Foo = { template: '&amp;lt;div&amp;gt;foo&amp;lt;/div&amp;gt;' }; 定义路由(数组): const routes = [ { path: '/foo', component: Foo }...
路由和嵌套路由
Vue Router是Vue.js的官方路由器,本文例子使用模块化机制编程。首先在App.vue中加入 &amp;amp;lt;router-view/&amp;amp;gt;,例子如下: &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div id=&amp;quot;app&amp;quot;&amp;amp;gt; &amp;amp;lt;h1&amp;amp;gt;第一层&amp;amp;lt;/h1&amp;amp;gt; &am
Vue_路由_嵌套路由
本课程介绍了vue2.0+的内容nn包括,基本语法使用,组件,路由,项目框架,项目案例
Rails 路由--嵌套路由
<span style="color:#333333;font-size:14px;background-color:#FFFFFF;">Rails 是使用 Ruby 语言编写的 Web 应用开发框架,<span style="color:#333333;font-size:14px;background-color:#FFFFFF;">目的是通过解决快速开发中的共通问题,简化 Web 应用的开发。与其他编程语言和框架相比,使用 Rails 只需编写更少代码就能实现更多功能</span></span>
父子路由(路由的嵌套)
routes:[ { path:'/home', component:home, children:[ {path:'login',component: login}, {path:'reg',component:reg} ]}, ],
router-view复用路由的抽离
路由的注意事项,二级三级路由的引用和路由的抽离,以及router-view的复用
Vue 路由: vue-router安装和使用
1、介绍(由来)        vue-router是Vue.js的路由插件。2、 使用场景(优劣)原理       适合用于构建单页面应用,基于路由和组件;路由用于设定访问路径,将路径和组件映射起来。路径之间的切换实际上就是组件的切换。3、安装      npm install vue-router --save--save参数的作用:在包配置文件package.json文件添加对应的配置,会增...
相关热词 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池 c#5.0 安装程序 c# 分页算法 c# gmail 发邮件 c# 多层文件