今天初次上手vue3配置路由的时候明明跟着实例编写的代码,访问页面时总是渲染出来,结果闹了个乌龙,访问路径写错了

🌼正确访问方式应当是: 域名+端口+路径:http://127.0.0.1:5173/index,注意端口后面需要加上路由对应的路径,若没有则访问 路径为 ‘/’ 的页面。

  • 页面代码:src/views/index.vue
<template>
  <div>首页</div>
</template>

<script setup>
</script>

<style lang="scss">
</style>
  • 路由器:src/router/index.js
import {createRouter,createWebHistory} from 'vue-router'

const routes = [
    {
        name: '首页'
        ,path: '/index'
        ,component: () => import('../views/index.vue')
    }
];
const router = createRouter({
    routes
    ,history:createWebHistory()
});
export default router

出错在这里,访问地址应该后加上 /index

  • 应用入口代码:src/App.vue
<template>
  <div>
    <router-view />
  </div>
</template>

<script setup>
</script>
<style scoped>
</style>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐