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

目录
  • router-view内容无法渲染出来
  • Bug记录router-view没有被渲染
    • 起因
    • 排查
    • 错因

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 之差。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue更新路由router-view复用组件内容不刷新的问题

    本文知识点比较简单,主要面向vue新人解惑,vue前辈请忽略. 实现功能: 见上图,这是一个产品列表,当进入不同列表时应该更新内容. 代码如下: //router配置 { path: "/products/:category", name: "Products", components: { ... } } //组件js配置 mounted() { this.getData(this.$route.params.category); }, methods: { ge

  • vue中router-view组件的使用详解

    vue中router-view组件的使用详解

    在开发vue项目中经常需要实现一个页面里面可以切换着展现不同的组件页面 例如:下图中通过点击侧边栏不同的组件路由到不同的组件页,而侧边栏和顶部部分是不变的,切换的只是组件页面. 这个时候我们就需要用到 路由中的 router-view组件(也叫路由占位符) 了 首先我们来到 需要切换不同组件页的页面 ,在自己需要的位置 添加 router-view组件 Home.vue <template> <!--头部区域--> <el-header> <div> <

  • vue2.0 路由不显示router-view的解决方法

    今天学习vue2.0 的 router-view , 爆出的错误不计其数,不知道哪位大神写的router-view,配置的参数竟然不是router,而是routes =_=|| 这是花了一上午整出来的main.js,还有网上的同道们的提醒: import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App'; import goods from './components/goods/goods';

  • vue-router 中router-view不能渲染的解决方法

    vue-router 中router-view不能渲染的解决方法

    最近在做一个vue的项目,其中使用了vue2.0,vue-router2.0.在使用vue-router的时候跳了一个很大的坑,router-view不能渲染,花费了好多时间终于发现了原因. 项目目录结构 其中main.js import Vue from 'vue'; import App from './App'; import router from './router'; /* eslint-disable no-new */ new Vue({ el: '#app', router,

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

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

    目录 router-view内容无法渲染出来 Bug记录router-view没有被渲染 起因 排查 错因 router-view内容无法渲染出来 最近在学习vue路由知识,在写到关于 <router-view></router-view>时,内容无法渲染出来,找了许久之后,才发现是一个神坑!!! 配置路由时注意,名字定义为routes 而不是routers 否则你的也内容渲染不出来. Bug记录router-view没有被渲染 起因 在浏览器控制台查看 router-link 的

  • 详解Vue路由History mode模式中页面无法渲染的原因及解决

    详解Vue路由History mode模式中页面无法渲染的原因及解决

    Vue下路由History mode导致页面无法渲染的原因 用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 一般开发的单页应用的URL都会带有#号的hash模式,因为整个应用本身而言就只有一个HTML,其他的都是通过router来渲染.如果因为业务

  • 详解vue路由篇(动态路由、路由嵌套)

    什么是路由?网络原理中,路由指的是根据上一接口的数据包中的IP地址,查询路由表转发到另一个接口,它决定的是一个端到端的网络路径. web中,路由的概念也是类似,根据URL来将请求分配到指定的一个'端'.(即根据网址找到能处理这个URL的程序或模块) 使用vue.js构建项目,vue.js本身就可以通过组合组件来组成应用程序:当引入vue-router后,我们需要处理的是将组件(components)映射到路由(routes),然后在需要的地方进行使用渲染. 一.基础路由 1.创建vue项目,执行

  • Vue路由守卫及页面登录权限控制的设置方法(两种)

    ①先在我们的登录页面存储一个登录数据 // 登录成功时保存一个登录状态: sessionStorage.setItem("flag", 1); ② 添加路由守卫 方法一: 直接在路由中添加 const router = new VueRouter({ ... }) // 路由守卫 router.beforeEach((to, from, next) => { // ... }) 方法二:当我们使用的是export default 方法时可以在main.js中添加 router.b

  • vue路由权限和按钮权限的实现示例

    vue路由权限和按钮权限的实现示例

    目录 一 菜单路由权限 二 按钮权限的实现 一 菜单路由权限 1.1前端路由配置表 1.2后端数据返回 1.3 拿到数据后存到vuex 1.4 扁平化的目的是为了跳转路由时进行对比权限 //扁平化方法 flatten(data) { return data.reduce((arr,{name,id,resourceType,dimensionTypeCode,btnPermissions,path,children = [],}) => arr.concat([{name,id,resource

  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

  • Vue 路由切换时页面内容没有重新加载的解决方法

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了<keep-alive>: <template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </t

  • 搭建Vue从Vue-cli到router路由护卫的实现

    别的不多说,开始动爪把, 首先安装vue-cli  mac: sudo npm install -g @vue/cli github: https://github.com/XinYueXiao/vue-routes 1.Vue-cli基础使用 1.1 创建测试项目 vue create vue-routes 1.2 创建成功,启动项目 yarn serve 在 http://localhost:8080/ 就可以看到欢迎:clap:页面了 1.3 搞点自定义配置,新建vue.config.js

  • vue路由分文件拆分管理详解

    这里说的路由拆分指的是将路由的文件,按照模块拆分,这样方便路由的管理,更主要的是方便多人开发.具体要不要拆分,那就要视你的项目情况来定了,如果项目较小的话,也就一二十个路由,那么是拆分是非常没必要的.但倘若你开发一些功能点较多的商城项目,路由可以会有一百甚至几百个,那么此时将路由文件进行拆分是很有必要的.不然,你看着index.js文件中一大长串串串串串串的路由,也是很糟糕的. 首先我们在router文件夹中创建一个index.js作为路由的入口文件,然后新建一个modules文件夹,里面存放各

  • vue 路由视图 router-view嵌套跳转的实现

    vue 路由视图 router-view嵌套跳转的实现

    目录 1.修改app.vue页面 2.创建登录页面(/views/login/login.vue) 2.1.在router/index.js中添加登录页面路由 3.创建主页面(/components/index.vue) 3.1.创建主页面路由 4.修改首页 4.1.开启菜单路由模式,并修改菜单跳转路径 4.2.添加router-view 5.创建两个子页面 目的: 实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的

随机推荐