今天初次上手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>