Vue中router-view无法显示的解决办法

 更新时间:2023年07月11日 08:33:36   作者:晨曦微兮  
这篇文章主要给大家介绍了关于Vue中router-view无法显示的解决办法,router-view组件作为vue最核心的路由管理组件,在项目中作为路由管理经常被使用到,需要的朋友可以参考下

如果你存在:

  • 代码没报错,运行成功,但是index.js中router挂接的内容无法显示,
  • 没有犯书写错误,routes 和 component 没有写错,
  • 在浏览器中检查,App.vue中对应的 <router-view>为空

那么建议你接着看,首先,正确的结果:

//App.vue中
<template>
  <div id="app">
//关键是 router-view 能否成功渲染
    <router-view></router-view>
    <div>
      <p>
        If Element is successfully added to this project, you'll see an
        <code v-text="'<el-button>'"></code>
        below
      </p>
      <el-button>el-button</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'app',
  components: {
  }
}
</script>
//index.js文件
 
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/main/HomeView.vue'
import Layout from '../views/LayoutView.vue'
 
Vue.use(VueRouter)
 
//1.这里是routes,指定路径和成员 
const routes = [
  {
    path: '/',
    name: 'Layout',
    
    //以下的 component(这是对的) 千万注意,不要写成 components(这是错的)
    component: Layout,
    children: [
      {
        path: '',
        name: 'Home',
        component: HomeView,
        meta: {
          isLogin: true
        }
      },
      {
        path: 'params',
        name: 'params',
        component: () => import('../views/main/ParamsView.vue'),
        meta: {
          isLogin: true
        }
      },
      {
        path: 'ad',
        name: 'ADclassify',
        component: () => import('../views/main/ADClassify.vue'),
        meta: {
          isLogin: true
        }
      },
      {
        path: 'product',
        name: 'product',
        component: () => import('../views/main/ProductView.vue'),
        meta: {
          isLogin: true
        }
      }
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/LoginView.vue'),
    meta: {
      isLogin: true
    }
  }
]
//2.这里是router,是一个VueRouter对象
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
//3.这里是routes,对应1中指定的内容
})
 
export default router

以上,没什么问题的话,可以看到

 App.vue中对应的 <router-view>为是有值的

后来我导入在main.js中了一个js文件

//main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
import './assets/css/common.css'
//导入了这个文件,之后就看不见 router-view 渲染的内容了
// import './router/permission.js'
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

这里,现在我还是不知道 permission.js 为什么会导致router-view不能渲染

//permission.js
import router from './index'
 
router.beforeEach((to, from, next) => {
  if (to.meta.isLogin) {
    const token = false
    if (token) {
      next()
    } else {
      next({
        name: 'Login'
      })
    }
  } else {
    next()
  }
})

总的来说:Vue中router-view无法显示可能是导入了什么不合适的文件导致

总结

到此这篇关于Vue中router-view无法显示的解决办法的文章就介绍到这了,更多相关Vue router-view无法显示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue引入静态js文件的方法

    vue引入静态js文件的方法

    这篇文章主要介绍了vue引入静态js文件的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • Vue虚拟DOM详细介绍

    Vue虚拟DOM详细介绍

    虚拟DOM的概念是通过状态生成一个虚拟节点树,然后使用虚拟节点树进行渲染。在渲染之前,会使用新生成的虚拟节点和上一次生成的虚拟节点进行对比,只渲染不同的部分
    2022-08-08
  • Vue3之使用js实现动画示例解析

    Vue3之使用js实现动画示例解析

    这篇文章主要为大家介绍了Vue3之使用js实现动画示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • vue模版编译详情

    vue模版编译详情

    本文的初衷是想让更多哎学习的人知道并了解vue模版编译,所以文中主要以阶段流程为主,不会涉及过多的底层代码逻辑,需要的朋友可以参考一下
    2021-09-09
  • Vue和React有哪些区别

    Vue和React有哪些区别

    这篇文章主要介绍了Vue和React有哪些区别,帮助大家更好的理解和学习JavaScript框架,感兴趣的朋友可以了解下
    2020-09-09
  • Vue+Element实现页面生成快照截图

    Vue+Element实现页面生成快照截图

    这篇文章主要为大家详细介绍了Vue如何结合Element实现页面生成快照截图功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • Vue数据双向绑定原理实例解析

    Vue数据双向绑定原理实例解析

    这篇文章主要介绍了Vue数据双向绑定原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • vue-quill-editor插入图片路径太长问题解决方法

    vue-quill-editor插入图片路径太长问题解决方法

    这篇文章主要介绍了vue-quill-editor插入图片路径太长问题解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 利用vscode编写vue的简单配置详解

    利用vscode编写vue的简单配置详解

    这篇文章主要给大家介绍了利用vscode编写vue简单配置的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-06-06
  • vue插件v-touch的坑及解决(不能上下滑动)

    vue插件v-touch的坑及解决(不能上下滑动)

    这篇文章主要介绍了vue插件v-touch的坑及解决(不能上下滑动),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论