转载--vue的 router-view不显示

昨天想做一个小demo
一切准备就绪,写好路由,然而意想不到的是,router-view无效
主要是不报错,代码翻来覆去也不知道哪里出问题了
不报错连百度都不知道该怎么百度了
头疼
想来想去只有是路由错了,最后实在没有办法,把原来项目的路由拿过来试试
这一试发现OK,那肯定是我哪里写错了,
一个单词一个单词的找毛病
最后发现

export default new Router({
    routers: [ 这里啊,大家看出来没有,应该是 routes!!! routes!!! routes!!!
        {
         path: '/',
         name: 'def',
         redirect: '/home'  //跳默认路由用redirect
         },
        {
            path: '/home',
            name: 'Home',
            component: Home,
        }
    ]
})

routes!!! routes!!! routes!!! routes!!! routes!!!

记住不要写错了,实在手误严重如我的,可以直接复制粘贴之前项目代码



作者:cooqi
链接:https://www.jianshu.com/p/4a09aec3ddad
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
### 回答1: 可能的原因有很多,但以下是一些常见的解决方法: 1. 确保在 Vue3 中正确地安装了路由器,并正确配置了路由表。 2. 检查您是否正确使用了 `<router-view>`,并且它在视图中正确地放置和包围。 3. 确认您的路由表中的路径与您在视图中使用的路径相匹配,确保路由表中的所有路径都包含在根路径下。 4. 检查您是否在管理视图(例如使用 `v-show` 或 `v-if`)时将 `<router-view>` 内嵌在其他标记中,这可能会导致问题。 如果您尝试了所有这些解决方案但仍然无法解决问题,请考虑分享您的代码或详细的错误信息以获取更好的帮助。 ### 回答2: 在Vue 3中使用Vue Router时,如果router-view未正常显示,可能是以下原因导致的: 1. Vue Router未正确安装:必须在Vue实例中安装VueRouter插件。需要在main.js中执行如下操作: ``` import { createApp } from 'vue' import { createRouter, createWebHistory } from 'vue-router' import App from './App.vue' const router = createRouter({ history: createWebHistory(), routes: [ // 路由配置 ] }) createApp(App).use(router).mount('#app') ``` 2. 缺少路由配置:在创建Vue Router实例时需要定义路由配置。路由配置应该包含至少一个路由规则。 ``` const router = createRouter({ routes:[ { path: '/home', component: Home } ] }) ``` 3. 没有使用router-view标签:需要在组件template中使用router-view标签以便Vue Router渲染匹配路由的组件。 ``` <template> <div> <h1>Hello World</h1> <router-view></router-view> </div> </template> ``` 如果出现上述问题,请逐一排查各种可能性,一般情况下只要按照规范写就能解决问题。 ### 回答3: 在使用 Vue3 的时候,如果 router-view显示,首先需要检查以下几个方面: 1. 路由配置是否正确:检查路由配置是否正确,包括路由路径、组件路径、路由名称等。可以通过在浏览器中输入路由路径来检查路由是否正确。 2. index.html 文件中是否引入了 Vue Router:在使用 Vue Router 时,需要在 index.html 文件中引入 Vue Router。可以在元素检查工具中检查 head 标签中是否有以下代码: ```html <script src="https://unpkg.com/vue-router@next"></script> ``` 3. 是否安装了 Vue Router:在使用 Vue Router 时,需要先安装 Vue Router。可以在项目根目录中执行以下命令进行安装: ``` npm install vue-router@next ``` 4. 是否在 main.js 文件中注册了 Vue Router:在 main.js 文件中需要注册 Vue Router,可以通过以下代码进行注册: ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` 其中,router 表示引入的 Vue Router 实例。 5. 是否在 App.vue 文件中使用了 router-view:在 App.vue 文件中需要使用 router-view 组件来渲染路由组件。可以在 App.vue 文件中添加以下代码: ```html <router-view></router-view> ``` 6. 是否在路由组件中使用了 router-link:如果需要使用路由链接跳转,可以在路由组件中使用 router-link 组件。可以在路由组件中添加以下代码: ```html <router-link to="/path">跳转</router-link> ``` 以上是一些常见的问题,如果仍然无法解决问题,请检查是否有报错信息,并尝试在网上查找相关解决方案。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值