vue2中用vue router实现spa多视图切换，核心是建立路径与组件映射并通过router-view渲染；需安装vue-router@3.x、显式注册、配置路由规则、使用router-link和router-view，并支持编程式导航。
Vue2 中用 Vue Router 实现单页应用（SPA）的多视图切换，核心就是建立路径与组件的映射关系，并通过 router-view 渲染对应内容。它不刷新页面，只动态替换视图区域，体验接近原生 App。
安装与注册 Vue Router
Vue2 必须使用 vue-router@3.x 版本（如 3.6.5），安装后需显式注册插件：
- 执行
npm install vue-router@3.6.5或yarn add vue-router@3.6.5 - 在入口文件（如
main.js）中导入并调用Vue.use(VueRouter) - 确保 Vue 实例创建时传入
router选项，否则路由不生效
定义路由规则与组件映射
路由本质是 path 到 component 的键值对。通常在 src/router/index.js 中集中配置：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
-
path是 URL 路径（如'/home'、'/user'），支持参数占位符如'/user/:id' -
component是异步或同步导入的 Vue 组件（推荐按需懒加载：component: () => import('@/views/Home.vue')） - 可选配
name（命名路由，便于编程式导航）、meta（元信息，用于权限或标题控制）
在模板中声明导航与渲染出口
两个关键内置组件缺一不可：
-
<router-link to="/about">关于</router-link>替代原生<a></a>，点击触发路由跳转，不刷新页面 -
<router-view></router-view>是视图挂载点，匹配到的组件会自动渲染在此处 - 若需多级嵌套（如布局页 + 子页面），父路由组件内部也要放一个
<router-view></router-view>
编程式导航控制跳转逻辑
除了声明式链接，业务中常需 JS 控制跳转：
- 使用
this.$router.push('/login')或命名路由this.$router.push({ name: 'Login' }) - 带参数跳转：
this.$router.push({ path: '/user', query: { id: 123 } })（URL 显示 ?id=123）或{ name: 'User', params: { id: 123 } }（需 path 配置/user/:id） - 返回上一页用
this.$router.go(-1)，替代window.history.back()
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
