返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue路由篇之router-view内容无法渲染出来问题
  • 390
分享到

vue路由篇之router-view内容无法渲染出来问题

2024-04-02 19:04:59 390人浏览 八月长安
摘要

目录router-view内容无法渲染出来Bug记录router-view没有被渲染起因排查错因router-view内容无法渲染出来 最近在学习Vue路由知识,在写到关于 <

router-view内容无法渲染出来

最近在学习Vue路由知识,在写到关于 <router-view></router-view>时,内容无法渲染出来,找了许久之后,才发现是一个神坑!!!

配置路由时注意,名字定义为routes 而不是routers 否则你的也内容渲染不出来。

Bug记录router-view没有被渲染

起因

在浏览器控制台查看 router-link 的时候,发现其被正常渲染,然而 router-view 却没有被浏览器渲染出来。

排查

因vue的静态路由文件控制着上述的两个标签,查看代码(../router/index.js)如下:

import Vue from 'vue'
import VueRouter from 'vue-router'
import pageOne from '../views/pageOne'
import pageTwo from '../views/pageTwo'
Vue.use(VueRouter);
const routers=[ //错误在这儿(1)
    {path:'/pageOne',component:pageOne},
    {path:'/pageTwo',component:pageTwo},
    {path:'/',component:pageOne}
];
const router=new VueRouter({
    routers  //错误在这儿(2)
});
export default router

错因

由于在写代码时,习惯性的将路由写成 routers ,而原本这里应该写成 routes,只是一个字母 r 之差。 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue路由篇之router-view内容无法渲染出来问题

本文链接: https://lsjlt.com/news/147590.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作