Vue 路由入门篇，router的基本配置+结合小实战弄清router的基本搭建🚀

狂炫一碗大米饭
2,143 阅读5分钟

前言

从2024到2025了我学习前端也有一个多月了，从vue语法，组件，响应式，生命周期，指令，到这两天学的vue-router 路由器，也差不多已经掌握了构建单页应用的简单开发了，距离我的第一个实战项目越来越近了，希望能在大二暑假能拿到一份不错的实习🐂🐎。好了，让我们来一起来看看Vue Router吧！

MultiversxXportalGIF.gif

什么是Vue Router

简单来说 router是 Vue.js 的官方路由管理器，可以帮助你管理页面的跳转、URL 路径与视图的匹配、页面状态的保存等功能。我们对页面最简单的理解就是一个页面就是一个html文件，而网站之间页面的跳转，就是从一个html跳转到另一个html 这是早期的前端跳转逻辑。 而在vue中只需要一个html文件就够了，index.html

现在只有一个html文件了，那么我们如何实现在点击某个按钮时，跳转到另一个页面？要跳转页面的名称是什么？地址是什么？需不需要传什么参数过去？

这所有的操作现在都需要由js来完成，而这部分功能封装成一个插件就是router

如何使用vouter

  1. 1 安装vue router
npm install vue-router

2. 封装路由模板 在大型项目中一般会将路由配置单独放在一个目录（如router）是一个良好的实践。在这个目录中，通常会有一个index.js文件作为入口配置文件，在这里定义所有的路由规则、导入需要的组件等。

-在src下创建router目录，在router目录中创建index.js文件

import {
     createRouter, // 创建路由实例
     createWebHashHistory // 路由模式
     } from 'vue-router'// 插件
     // 页面级别组件放到views文件夹中

import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 路由配置
     const routes = [
      {
       path: '/',// 路径
       component: Home,//页面组件
       meta:{
        requireAuth:true,
         title:'关于',
       }
      },
      {
       path: '/about',
       meta:{
        requireAuth:true
       },
       name: 'about',
       component: About
      }
  ]
// 路由实例
     const router = createRouter({// 创建路由
        history: createWebHashHistory(),// 路由模式
        routes// 路由配置数组
      });
  1. 在main.js中通过import引入
import router from './router'

并初始化

app
.use(router)

实战例子

在组件App.vue中使用路路由

<script setup>
const name = "稀土掘金" // 数据

</script>

<template>
<div class="page">
  <header class="page-header">
    <img src='https://picx.zhimg.com/v2-479196399e76e67bd37bfa7aec96875d_l.jpg?source=d16d100b' class="logo-image">
    <h3 class="brand">{{name}}</h3>
    <nav class="menu">
      <router-link class="menu-item" to="/">首页</router-link>
      <router-link class="menu-item"  :to="{name: 'about'}" >BOT</router-link >
      <router-link class="menu-item"  :to="{name: 'postIndex'}">沸点</router-link >
    </nav>
  </header>
  <main class="page-body">
    <router-view />
  </main>
</div>
</template>

<style lang="stylus" scoped>
.page
  padding 32px
.page-header
  display flex
  align-items center
  border-bottom 1px solid #e1e1e1
.logo-image
  width 50px 
  height 50px 
  object-fit cover 
  border-radius 8px 
  margin-left 10px 
  padding 8px 16px
.brand
  margin-right 32px
.menu-item
  display inline-block
  text-decoration none
  color #585858
  margin 8px
  padding 8px 16px
.page-body
  margin 24px 0
.router-link-active
  color #505050
  background #eeeeee
  border-radius 5px
</style>

现在我们再来配置router：创建router文件夹，再在该文件夹下创建index.js作为入口的配置文件

// 路由配置
import {
     createRouter, // 创建路由实例
     createWebHashHistory // 路由模式
     } from 'vue-router'// 插件
     // 页面级别组件放到views文件夹中

import Home from '../views/Home.vue'
import About from '../views/About.vue'
// 路由配置
     const routes = [
      {
       path: '/',// 路径
       component: Home,//页面组件
       meta:{
         title:'首页'   
       }
      },
      {
       path: '/about',
       meta:{
        title:'关于',
       },
       name: 'about',
       component: About
      }
    ]
    // 路由实例
     const router = createRouter({// 创建路由
        history: createWebHashHistory(),// 路由模式
        routes// 路由配置数组
      });

最后我们只需要把页面组件一个一个写好就好了

Home组件

<template>
    <div class='home'>
        Home  
     梦开始的地方
    </div>
    <div>
     <img src="https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/59901f75169541d69bf4a514a12235ec~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg54uC54Kr5LiA56KX5aSn57Gz6aWt:q75.awebp?rk3s=f64ab15b&x-expires=1771765710&x-signature=pzM1eGe6488f3KQdE5fc4sw0zqA%3D" class='img'>
    </div>
</template>

<script>
   
</script>

<style scoped>
.home{
    font-size: 50px;
    color: red;
}
</style>

About组件

<template>
    <div>
     我是BOT 
    </div>
    <div>
        <img src="https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/b412165fff2c40cea7ae9afc2162ea1a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg54uC54Kr5LiA56KX5aSn57Gz6aWt:q75.awebp?rk3s=f64ab15b&x-expires=1771765710&x-signature=kJeSrDLSQSDdvNUpfeA9tfqp0Rs%3D">
    </div>
    <div>
        <button @click="goHome">点击回到上一页</button>
    </div>
</template>

<script setup>
import {useRouter} from 'vue-router'
const router = useRouter() //路由实例 总管所有的路由
const goHome=()=>{
   router.push('/')
}
</script>

<style  scoped>

</style>

最后我们先来看看效果 _2025-01-19 155322.gif

好，让我们来看看router的工作原理

  1. 首先<router-link>是 Vue Router 提供的专用组件，用于在单页面应用（SPA）中实现导航. 它替代了原生的<a>标签

<router-link> 是对 <a> 标签的扩展,它具有<a>标签的使用功能，还会将路由对应的组件显示到相应的位置上。

那使用router-link的好处是什么呢？

  1. 可以无页面刷新导航：也就是在页面切换的时候不会刷新页面就能完成切换，这样就减少了页面跳转的白屏和卡顿问题，提升了用户的体验。同时也减少了服务器的压力。
  2. 支持动态路径
<template>
  <div>
    <router-link :to="`/user/${userId}`">Go to User</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: 123,
    };
  },
};
</script>

而<a>标签则只能

<a href="/user/123">Go to User</a>
  1. router-view 是用来显示当前匹配组件的地方。
    <main class="page-body">
      <router-view />
    </main>

我们在页面的主要内容区域显示对应的主键。 由<router-link> 和 <router-view>就实现了路由和组件的交互。

  1. 1配置路由
import {
     createRouter, // 创建路由实例
     createWebHashHistory // 路由模式
     } from 'vue-router'// 插件
createRouter 这是vue router 的核心方法，用于创建路由实例的，路由实例包括所以的路由规则，然后app.use(router) 将这个路由实例挂载到 Vue 应用中。
createWebHashHistory 指定路由的模式。路由有两种模式Hash 模式：createWebHashHistory和History 模式：createWebHistory这两种路由模式的差别就是Hash模式不影响后端，不会返回 404 错误，而History模式需要服务器重新配置，否则会出现404错误，如何你使用的是vite快速搭建vue的话，是不用配置的，vite它默认支持History 模式，无需额外配置。

1.2定义路由规则

// 定义路由规则
     const routes = [
      {
       path: '/',// 路径
       component: Home,//页面组件
       meta:{
         title:'首页'   
       }
      },
      {
       path: '/about',
       meta:{
        title:'关于',
       },
       name: 'about',
       component: About
      }
    ]

路由规则的基本结构: 1. path 属性：定义了该路由对应的 URL 路径。 2. component 属性:指定了当该路由被激活时应该渲染的 Vue 组件。 3. meta 属性：用于存储与该路由相关的额外信息或元数据，比如设置页面的标题，添加限制访问等。 4. name属性：命名路由的名字，添加可读性和维护性，路由可以通过名字来导航如：

<router-link class="menu-item" to="/about">BOT</router-link>

<router-link class="menu-item"  :to="{name: 'about'}" >BOT</router-link >

这两条导航的效果是一样的。

  1. 3 路由实例
const router = createRouter({
       history: createWebHashHistory(),// 路由模式
       routes// 路由配置数组
     });
  1. 4 导出路由实例
export default router;

这样一个完整的路由配置就完成了。

JuijuDoneGIF.gif

avatar
文章
阅读
粉丝