code前端网Vue Router.js是什么？核心知识与实战技巧全解答
文章标签
Vue Router；前端路由
前端开发里，单页应用（SPA）越来越流行，而Vue Router.js作为Vue生态中专门管“页面跳转、URL映射”的工具，很多新手刚接触时一堆问号：它到底是干啥的？怎么配置？遇到问题咋解决？这篇文章用问答形式，把Vue Router的核心知识、实用技巧全拆明白，不管你是刚入门还是想进阶,看完心里有数～
Vue Router.js 到底是什么？
简单说，Vue Router是Vue官方的路由管理器，专门解决单页应用里“不同URL对应不同页面组件”“无刷新跳转页面”“管理页面状态”这些需求。
举个现实例子：传统多页应用（比如PHP写的网站），每个页面是独立HTML，跳转时整页刷新；但SPA（比如用Vue做的后台管理系统）只有一个index.html，页面切换靠JS动态渲染组件，Vue Router就像“导航员”，告诉SPA：当URL是/user时，渲染User组件；URL是/product时，渲染Product组件，还能处理嵌套布局、参数传递这些复杂场景。
总结核心作用：
- 映射URL到组件（让不同路径显示不同内容）
- 实现无刷新的页面跳转（用户体验更流畅）
- 管理路由级别的状态（比如动态路由参数、嵌套结构）
为啥做SPA一定要用Vue Router？自己手写路由不行吗？
不是不能自己写，但Vue Router帮我们封装了路由核心逻辑,解决了SPA的3大痛点：
① URL与组件同步：手动写的话，得监听URL变化（比如hashchange或popstate事件），再手动渲染组件，容易漏场景（比如直接输入URL刷新页面）；Vue Router内置了这些监听和渲染逻辑。
② 复杂场景支持：比如嵌套路由（一个页面里再嵌套子页面，像后台侧边栏+内容区）、动态路由（URL带参数，如/user/123）、导航守卫（权限控制、页面离开提示）这些，自己实现成本高还容易出错。
③ 开发体验友好：提供了声明式的<router-link>（替代a标签，避免全页刷新）和<router-view>（渲染匹配组件），还有编程式导航（this.$router.push）,写代码更简洁。
打个比方：自己写路由像“徒手盖房”，Vue Router是“预制板+专业工具”,效率和稳定性差太多～
Vue Router 核心概念有哪些？先搞懂这些再上手！
新手最容易懵的就是“路由配置、路由器实例、路由组件”这些概念,一个个拆：
（1）路由配置（routes数组）
这是个“规则列表”，每个规则是对象，告诉Vue Router：“当URL匹配path时，渲染对应的component”。
重点记：path是URL路径，component是对应组件，children实现嵌套，:参数名是动态路由参数。
（2）路由器实例（router）
用createRouter创建的实例，是Vue Router的“总控中心”,它需要2个关键配置：
- history模式：决定URL长啥样，比如
createWebHistory()是history模式（URL像/user），createWebHashHistory()是hash模式（URL像/#/user）。 - routes：就是上面的路由规则列表。
代码示例（Vue3写法）：
```javascript import { createRouter, createWebHistory } from 'vue-router' import Home from '@/views/Home.vue'const router = createRouter({ history: createWebHistory(), // 选history模式 routes: [/ 上面的routes数组 /] })
export default router
### （3）路由链接（<router-link>）
<p>替代传统的<code><a href=""></code>，因为SPA不能全页刷新，<code><router-link></code>会触发“前端路由跳转”（只更新页面内容，不刷新整个页面），用法：</p>
```html
<router-link to="/user">去用户页</router-link>
<router-link :to="{ name: 'UserDetail', params: { id: 123 }}">去用户123页</router-link>重点：to可以是字符串（路径）或对象（配name、params、query等）。
（4）路由视图（<router-view>）
这是个“占位符”，Vue Router会把匹配到的组件渲染到这个位置，比如App.vue里：
```html嵌套路由时，父组件里的<router-view>负责渲染子路由组件（比如Dashboard里的子路由）。
（5）动态路由 & 嵌套路由
动态路由：URL带参数（如/user/:id），用来匹配“一类页面”（比如不同用户的详情页复用User组件），组件内用$route.params.id（Vue2）或useRoute().params.id（Vue3）取参数。
嵌套路由：通过children配置，实现“父布局+子页面”结构（比如后台系统的侧边栏固定，内容区切换子页面），父路由的component要包含一个<router-view>来渲染子组件。
项目里怎么安装、配置Vue Router？保姆级步骤
以Vue3项目为例（Vue2步骤类似，API有差异）,分4步：
（1）安装Vue Router
用包管理器安装（选npm或yarn）：
```bash npm install vue-router@4 // Vue3对应router4，Vue2对应router3 # 或 yarn add vue-router@4 ```（2）创建路由配置文件
在src目录下新建router/index.js,写入：
const routes = [ { path: '/', component: Home }, { path: '/user', component: User } ]
const router = createRouter({ history: createWebHistory(), // 选history模式（URL美观） routes // 等价于routes: routes })
export default router
### （3）在Vue应用中注册Router
<p>打开<code>src/main.js</code>，导入并use：</p>
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入路由实例
const app = createApp(App)
app.use(router) // 注册Router插件
app.mount('#app')（4）用路由组件和导航
在App.vue里加<router-link>和<router-view>：
启动项目,点击链接就能无刷新切换组件啦～
声明式导航和编程式导航有啥区别？什么时候用？
Vue Router提供了两种跳转方式，核心区别是“在哪写代码”和“使用场景”：
（1）声明式导航：<router-link>组件
写在模板里，像写HTML标签一样，适合“页面上的导航链接”，比如导航栏、菜单。
示例：
```html优点：简单直观，自动处理激活状态（active-class）,不用写JS逻辑。
（2）编程式导航：this.$router.push() 等方法
写在JS逻辑里（比如方法、生命周期、导航守卫），适合“需要判断后跳转”的场景，比如表单提交成功后跳转、点击按钮带参数跳转。
示例（Vue2）：
```javascript export default { methods: { goUserPage() { // 跳转到/user，带查询参数?name=xxx this.$router.push({ path: '/user', query: { name: '张三' } }) // 或用命名路由（更推荐，避免路径硬编码） this.$router.push({ name: 'UserDetail', params: { id: 123 } }) } } } ```Vue3中，要用useRouter()获取router实例：
优点：灵活，能结合业务逻辑（比如判断用户是否登录后再跳转）。
总结选择逻辑：
- 页面上静态的导航链接 → 声明式（<router-link>）
- 需要JS逻辑判断的跳转 → 编程式（router.push等）
动态路由参数怎么传？怎么取？刷新丢数据咋办？
动态路由用来处理“同一组件，不同数据”的场景（比如用户ID不同，页面内容不同），核心是参数传递和参数获取：
（1）配置动态路由
在routes里加:参数名，
（2）传参方式
有两种主流方式：路径参数（params）和查询参数（query）：
- params（路径参数）：参数藏在URL路径里（如
/user/123），配置时用:id，传参要配合命名路由（因为path里写参数不灵活）。
示例（编程式）：router.push({ name: 'UserDetail', params: { id: 123 } })
示例（声明式）： - query（查询参数）：参数跟在URL后面（如
/user?name=张三），不需要配置动态路由，直接在跳转时加query对象。
示例（编程式）：router.push({ path: '/user', query: { name: '张三' } })
示例（声明式）：
（3）组件内取参
Vue2中，用this.$route.params.id或this.$route.query.name；Vue3中，用useRoute()钩子：
（4）刷新页面参数丢失？
用params传参时，history模式下刷新页面会丢失参数（因为params不显示在URL里，路由匹配不到就没了）,解决办法：
- 改用query传参（query显示在URL，刷新保留）；
- 如果必须用params，配合路由元信息（meta）或Vuex存储参数（但麻烦，不推荐）；
- hash模式下params刷新不丢（因为hash模式的URL包含参数信息）,但URL带不美观。
除非有特殊需求,优先用query传参更稳～
嵌套路由怎么实现“父布局+子页面”？举个后台管理系统的例子
嵌套路由是SPA中很常见的“布局复用”场景，比如后台系统有侧边栏（固定）+ 内容区（切换子页面）,步骤如下：
（1）规划路由结构
假设父路由是/dashboard，对应的Dashboard组件包含侧边栏和一个<router-view>（用来渲染子路由）；子路由是/dashboard/home（首页）、/dashboard/settings（设置页）。
routes配置：
```javascript const routes = [ { path: '/dashboard', component: Dashboard, // 父组件（包含侧边栏+router-view） children: [ { path: 'home', component: DashboardHome }, // 子路由，path不加/ { path: 'settings', component: DashboardSettings } ] } ] ```（2）写父组件Dashboard.vue
模板里包含侧边栏和子路由的占位符：
```html注意：子路由的to可以直接写home（相对路径），因为父路由是/dashboard，所以实际URL是/dashboard/home。
（3）效果演示
当用户访问/dashboard时，Dashboard组件渲染，子路由默认要配置redirect（否则内容区空白）：
这样，侧边栏始终存在，点击不同链接时，只有内容区（<router-view>）切换组件,实现布局复用～
导航守卫是干啥的？权限控制、离开提示全靠它
导航守卫可以理解为“路由跳转的生命周期钩子”，在路由跳转前、跳转中
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
相关文章
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。