Vue-Router解析：揭秘路由的组成与使用技巧

dr李四维

已于 2024-11-07 16:16:30 修改

阅读量1.2k

点赞数 30

分类专栏：全栈文章标签： vue.js 前端 javascript 前端框架

于 2024-11-07 11:39:35 首次发布

本文链接：https://blog.csdn.net/qq_66848092/article/details/143584747

版权

全栈专栏收录该内容

14 篇文章

订阅专栏

一、简介

Vue-Router路由：打造无缝导航体验

什么是 Vue-Router？

二、路由的组成

1.VueRouter：路由器，根据路由请求在路由视图中动态渲染对应的视图组件。

2.：路由链接组件，用来生成超链接标签的组件，浏览器会解析成

3.:路由视图组件，用来确定具体视图组件的位置

4.三者如何协作执行一个流程？

三、Vue-Router路由在项目中如何使用？

一、简介

Vue-Router路由：打造无缝导航体验

在现代前端开发中，Vue.js 凭借其简洁和高效的特性，成为许多开发者的首选框架。然而，一个复杂的应用往往需要多个页面和组件之间的灵活切换，这时候就需要引入 Vue-Router。本文将生动形象地介绍 Vue-Router 的定义、使用方法以及遇到的重难点和解决办法。

什么是 Vue-Router？

想象一下，在生活中，设备通过 IP 地址互相通信，而一个复杂的 Vue 应用也需要一种机制来管理各个组件之间的访问路径。Vue-Router 正是这样一种机制，它建立了路径和组件之间的映射关系，就像生活中的设备和 IP 的映射关系一样。通过 Vue-Router，我们可以实现单页面应用（SPA），即在同一个页面内，根据不同的 URL 展示不同的内容，从而提升用户体验和页面加载效率。

其实Vue就属于单页面应用，所谓的路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容，即展示不同的视图组件。什么意思呢？在整个Vue应用当中，实际上只有一个页面，浏览器中的多个页面其实是假象，而所谓的页面切换，其实切换的是单页面当中不同的视图组件。就类似于黑板只有一块而上不同的课要写不同的内容是一样的，而替换视图组件的过程就是通过路由完成的。

二、路由的组成

1.VueRouter：路由器，根据路由请求在路由视图中动态渲染对应的视图组件。

什么意思呢？那我们具体来思考一个问题：其实视图组件很多，怎样判断它具体需要渲染哪一个视图组件呢？

其实在路由器中会维护一个路由表，而路由表实际上就是一个映射关系，而映射关系描述的就是某一个路径，比如说/pages/index.vue中的/pages就是一个路径，这个我们可以认为是路由路径。/pages对应的就是index.vue这个视图组件，而路由表的功能就是维护一系列的这样的路由关系。所以简单来说就是用来渲染视图组件的。

所以你其实乐意将路由表理解为城市中的交通指示牌，为网络数据包指明方向。它记录了目的地与路径的对应关系，每当数据包来临，路由表便迅速查阅，为其找到最佳通行路线。无论是穿梭于互联网的广阔天地，还是局限于局域网的小范围，路由表都是不可或缺的导航者。

2.<router-link>：路由链接组件，用来生成超链接标签的组件，浏览器会解析成<a>

<router-link>就像是Vue应用中的魔法传送门，它轻轻一点，就能在不刷新页面的情况下，将组件安全、迅速地传送到指定的路由页面。下面简单介绍一下它具体的应用：

在以上代码中，使用 <router-link>来将“首页”和“关于我们”转换成超链接，当在页面中点击“首页”或“关于我们”时，就换切换至相应的组件。

`3.`<router-view>:路由视图组件，用来确定具体视图组件的位置

<router-view>的功能是用来确定具体视图组件的位置，即展示与路由路径相匹配的视图组件，你可以把它想象成一个页面当中的占位符，通过上图其实可以发现，在点击了由<router-link>创建的超链接以后，<router-view>会渲染匹配到相应的组件，即 “跳转” 到对应的页面。此外你还可以与Vue的<transition>组件结合使用，可以为路由切换添加过渡动画。

4.三者如何协作执行一个流程？

具体的执行逻辑就是：点击<router-link>超链接，就发起了路由请求 → 路由器处理：根据路由路径不同，去渲染对应的视图组件 → 更新视图：将视图更新到<router-view>视图组件的具体位置中。如图所示：

三、Vue-Router路由在项目中如何使用？

1.安装 Vue-Router

首先，你需要通过 npm 或 yarn 安装 Vue-Router：

npm install vue-router --save

2. 定义路由和组件

接下来，定义你的路由和组件。假设你有两个页面：Home 和 About。你需要先创建这两个组件（Home.vue 和 About.vue），然后在router.js 文件中定义路由规则。

// router.js  
import Vue from 'vue';  
import Router from 'vue-router';  
import Home from './views/Home.vue';  
import About from './views/About.vue';  
  
Vue.use(Router);  
  
export default new Router({  
  routes: [  
    { path: '/', name: 'home', component: Home },  
    { path: '/about', name: 'about', component: About }  
  ]  
});

3. 在 Vue 实例中使用路由

在 main.js 文件中，你需要将路由添加到 Vue 实例中：

// main.js  
import Vue from 'vue';  
import App from './App.vue';  
import router from './router';  
  
new Vue({  
  router,  
  render: h => h(App)  
}).$mount('#app');

4. 在模板中使用 `<router-link>` 和 `<router-view>`

现在，你可以在模板中使用 <router-link> 来创建导航链接，<router-view> 来展示当前路由对应的组件。

<!-- App.vue -->  
<template>  
  <div id="app">  
    <nav>  
      <router-link to="/">Home</router-link>  
      <router-link to="/about">About</router-link>  
    </nav>  
    <router-view></router-view>  
  </div>  
</template>

其实路由的使用分为标签式和编程式，上面这种在模板中使用<router-link>的方法就是标签式使用路由 “跳转页面” 的方法，还有一种标签式的路由方法。

5.标签式路由方法

// 使用Vue Router的实例方法$router.push进行编程式导航
// 此方法接受一个位置对象或字符串作为参数，用于指定要导航到的新位置

this.$router.push('/about');

在这个例子中，我们传递了一个字符串'/about'作为参数 ,这意味着应用将尝试导航到路径为'/about'的路由,如果存在与'/about'匹配的路由，则Vue Router将渲染对应的组件到<router-view>中, 并且不会重新加载整个页面，只更新视图部分，实现页面的无缝切换。

四、重难点和解决办法

介绍了路由的使用之后，首先需要大家一起想一个问题，如果请求的路径不存在会出现什么问题？该怎么处理？这就是第一个重难点：404页面的处理

1. 404 页面处理

当用户访问一个不存在的路由时，可以成功发出路由请求，但是找不到相应的视图去渲染，所以会显示一个空 “页面”，所以我们可以给一个404的页面进行展示，说明请求的也页面不存在。

解决办法：

在路由表中添加一个通配符路由 { path: '*', component: NotFound }，来捕获所有未匹配的路由。
创建 NotFound.vue 组件，展示 404 页面内容。

{  
  path: '/about',  
  name: 'about',  
  // route level code-splitting  
  // this generates a separate chunk (about.[hash].js) for this route,  
  // which is lazy-loaded when the route is visited.  
  component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{  
  path: '/404',  
  //跳转到指定的404页面，'../views/404View.vue'为页面路径
  component: () => import('../views/404View.vue'),  
},  
{
  path: '*',
  //当检索不到所指定的路径时，执行跳转到404页面
  redirect: '/404'
}
const router = new VueRouter({  
  routes  
});  
export default router;