Vue路由跳转但显示空白页面

在router文件下的index.js 中配置了‘Hi’的子路由，但是点击跳转界面却不显示子路由的内容，但是url正常改变。

原因一：

没有在父路由中加上<router-view></router-view>，来将对应的组件内容渲染到router-view。

路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源(组件)的映射，通过一个路径的url地址，可以唯一找到一个资源。

解决方法：在父路由的template中加上<router-view></router-view>

<template><div class="hello"><router-view></router-view></div>
</template>

原因二：

子路由path加了‘/’。

以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。

出错：

export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/hi',component: Hi,children: [{path: '/', component: Hi},{path: '/hi2', component: Hi2},{path: '/hi3', component: Hi3}]}]
})

修改：

export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path: '/hi',component: Hi,children: [{path: '/', component: Hi},{path: 'hi2', component: Hi2}, //此处path去掉了‘/’{path: 'hi3', component: Hi3}  //此处path去掉了‘/’]}]
})

Vue路由跳转但显示空白页面相关推荐

vue 路由跳转并打开新页面
let id ='123'; const {href} = this.$router.resolve( { path: '/home/test',query: {id: id}} ) window.o ...
vue路由IE9浏览器iframe显示空白
最近遇到一个很神奇的问题,vue路由地址在所有浏览器单独访问都能正常显示,但是将路由地址通过JS赋值给IE9中的iframe src时一直显示空白页,查看浏览器源代码发现路由地址一切正常.因为只有IE ...
vue 路由跳转很慢，页面卡死
现象:页面在跳转时,路由发生了改变,但是页面还停留在上一个路由的页面原因:在路由跳转时,vue销毁页面数据用时过长,导致页面卡顿.经过排查发现页面中有一个select下拉选择框,数组有1w+,造成了 ...
Vue路由跳转-页面显示空白
跳转页面,指定路径跳转到某个页面时,如果没有按照正确的方式写路径,会导致页面显示空白 html部分方法1.<div class="nav-item-1" @click=&q ...
VUE路由跳转后自动刷新一次页面
VUE路由跳转后自动刷新一次页面我们在前端开发时有时会遇到一些问题,暂时找不到解决办法只有靠刷新才能救一下.可是又不能每次都手动刷新.在网上找了很久的自动刷新办法,发现大部分都是路由跳转类的刷新,和 ...
vue路由跳转回退后页面不刷新处理
vue路由跳转回退后页面不刷新处理 ·利用keep-alive 缓存需要缓存的页面具体实现流程 1.在app.vue中改写router-view <keep-alive><rout ...
vue 路由跳转页面不刷新
vue 路由跳转页面不刷新点击打开视频讲解地址在router-view 里边添加 :key="$route.fullPath" <!-- 添加:key="$ro ...
vue路由跳转页面滚动到顶部
如果想在vue路由跳转后滚动到指定的位置,只需要调用内置方法(scrollBehavior)官网地址链接: https://router.vuejs.org/zh/guide/advanced/scr ...
详解vue 路由跳转四种方式 (带参数)
本文介绍了vue 路由跳转四种方式 (带参数),本文通过实例代码给大家介绍的详细,具有一定的参考借鉴价值,需要的朋友可以参考下 1. router-link 1. 不带参数 <router-li ...

Vue路由跳转但显示空白页面

Vue路由跳转但显示空白页面相关推荐

最新文章

热门文章