vue router基础配置与渲染核心三步：定义路由规则（path-component映射）、创建路由实例（createrouter）、挂载并用渲染组件；缺一不可，否则页面不切换。
Vue Router 的基础路由配置和页面渲染，核心就三步：定义路由规则、创建路由实例、在页面中挂载并显示组件。只要每一步到位，页面就能按路径自动切换内容，不刷新也不跳转。
定义路由规则
在 src/router/index.js（或 index.ts）中，用数组声明路径与组件的映射关系：
-
path 是浏览器地址栏看到的路径，比如
/或/about -
component 是要渲染的 Vue 组件，支持同步写法（直接 import）或异步写法（
() => import('./About.vue')，实现懒加载） - 可选添加 name 字段，便于编程式导航（如
this.$router.push({ name: 'about' })）
示例：
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
<p>const routes = [
{ path: '/', name: 'home', component: HomeView },
{ path: '/about', name: 'about', component: AboutView }
]</p><p>export default createRouter({
history: createWebHistory(),
routes
})</p>
创建并挂载路由实例
确保路由实例被正确注入到 Vue 应用中，否则 <router-view></router-view> 不会生效：
- 在 src/main.js（或 main.ts）中，导入刚配置好的
router - 调用
app.use(router)，这一步必须在app.mount()之前
示例：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
<p>const app = createApp(App)
app.use(router) // 关键！不能漏，也不能放错位置
app.mount('#app')</p>
在页面中渲染匹配的组件
Vue Router 通过 <router-view></router-view> 标签作为“出口”，动态插入当前路径匹配的组件：
- 这个标签必须出现在能被路由控制的模板里，通常是 App.vue 的根模板中
- 它本身不渲染任何内容，只负责占位并替换为实际组件
- 搭配
<router-link></router-link>可生成带跳转能力的链接，不会触发整页刷新
示例（App.vue）：
<template><nav><router-link to="/">首页</router-link><router-link to="/about">关于</router-link></nav><router-view></router-view><!-- 这里就是组件渲染的位置 --></template>
常见问题排查要点
如果页面空白或始终不显示目标组件，优先检查这几项：
- 路径是否拼写正确（比如
/about写成/abot） - 组件文件路径是否准确，能否正常 import（尝试在组件内加
console.log验证） - 是否遗漏了
<router-view></router-view>标签，或它被错误地放在了 v-if/v-for 等响应式逻辑之外 - 路由模式是否与后端部署方式匹配（history 模式需服务端配合，否则刷新页面会 404）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
