Vue Router入门：“路由切换”实现

坐镇指挥
383 阅读4分钟

话题

经常在掘井学习的小伙伴会发现掘金主页导航栏有许多链接(首页，BOT等等)当我们点击一个链接时，内容部分会刷新但导航栏部分不会改变，这个功能是怎么实现的呢？经过了解得知:这个功能叫做“路由导航”或“路由切换”。在Vue.js中，Vue Router库提供了这个功能，允许用户通过点击链接或其他交互方式在不同的页面或视图之间进行导航，而不需要重新加载整个页面。这种导航方式通常用于单页应用程序（SPA）中，以提供更流畅的用户体验。

recording.png

正好借着这个知识点，我们去学习一下 Vue Router，推进我们的Vue入门之旅,让我们更加牛壁起来》

vue项目启动并安装 Vue Ruter

这里顺便把初始化并启动一个Vue项目的流程页讲一下： 在vue_react(我自己的文件夹，掘友自行定义)处打开集成终端 使用npm和Vite初始化并启动一个Vue项目的流程分别输入一以下指令或操作

  1. npm init vite //初始化一个vite项目。
  2. 定义项目名称（这里设为vue-router-demo），选择vue，选择JavaScript。
  3. cd vue_react//改变当前工作目录,这个步骤是必要的，因为后续命令（如npm run dev）需要在项目目录内执行
  4. npm install（可缩写 i）//安装项目所需的依赖项
  5. npm run dev//启动开发服务器,之后出现链接local:....，打开即可
屏幕截图 2025-01-03 191128.png

上面讲的是vue项目启动流程，要安装Vue Router呢，就把第四步npm i 改成npm i vue-router 即可 之后在你的package.json文件文件会有“vue-router”:"^4.5.0"表明安装成功.

image.png

准备这么久终于可以开干了。

Vue Router基本概念和使用方式

基本概念

  • 路由：路由（router）本质上就是对应关系，即URL地址与页面或组件之间的对应关系。在SPA项目中，不同功能之间的切换依赖于前端路由来完成。
  • 前端路由：前端路由是Hash地址与组件之间的对应关系。当用户点击页面上的路由链接时，会导致URL地址栏中的Hash值发生变化，前端路由监听到这个变化后，会把当前Hash地址对应的组件渲染到浏览器中

使用方式

这里先把项目目录src展示一下，方便理解以下内容

image.png
  • 创建路由模块：在项目的源代码目录下(src)，新建router/index.js路由模块，并初始化代码。包括导入Vue和VueRouter的包和创建路由实例对象。

index.js

// 路由配置
import{
    createRouter,// 创建路由实例
    createWebHashHistory// 路由模式
} from 'vue-router'// 插件
  • 导入并挂载路由模块：在项目的入口文件（main.js）中，导入并挂载路由模块，调用Vue.use函数安装VueRouter插件、创建路由实例对象并向外共享。

main.js

import router from './router'导入路由对象。
createApp(App)
.use(router) //安装 Vue Router 插件，将 Vue Router 的功能集成到 Vue 应用中，
并且挂载路由，使得应用能够使用路由进行导航和视图管理。
  • 声明路由链接和占位符：在组件中，使用Vue Router提供的<router-link>和<router-view>来声明路由链接和占位符。<router-link>用于定义路由链接，而<router-view>则作为占位符，用于在路由切换时动态地显示不同的组件内容，和 {{}}占位符类似。

App.vue

     <!-- 导航链接：首页 -->
    <router-link to="/" style="margin-right: 10px;">首页</router-link>
    <!-- 导航链接：关于 -->
    <router-link to="/about" style="margin-right: 10px;">关于</router-link>
    <!-- 导航链接：内容 -->
    <router-link to="/posts">内容</router-link>
  

 <!-- 渲染当前路由对应的组件 -->
    <router-view />

完整代码效果实现

recording.png

当然了作为入门的话自然是简单点好,循序渐进嘛！更完善的功能的下一章接着讲。

完整代码

App.vue

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

</script>

<template>
<div class="page">
  <header class="page-header">
    <h3 class="brand">{{name}}</h3>
    <nav class="menu">
        <!-- 导航链接：首页 -->
    <router-link to="/" style="margin-right: 10px;">首页</router-link>
    <!-- 导航链接：关于 -->
    <router-link to="/about" style="margin-right: 10px;">关于</router-link>
    <!-- 导航链接：内容 -->
    <router-link to="/posts">内容</router-link>

    </nav>
  </header>
  <main class="page-body">
        <!-- 渲染当前路由对应的组件 -->
    <router-view />    

  </main>
</div>
</template>

<style scoped>

</style>

main.js

// 从Vue库中导入createApp函数，用于创建Vue应用实例
import { createApp } from 'vue'
// 导入根组件App.vue
import App from './App.vue'
// 导入Vue Router实例
import router from './router'


createApp(App) // 使用App.vue作为根组件创建Vue应用实例
  .use(router) // 使用Vue Router插件，为应用添加路由功能
  .mount('#app') // 将Vue应用挂载到id为'app'的DOM元素上

createApp(App)
  .use(router)
  .mount('#app')

index.js

// 路由配置
import { 
    createRouter,  // 创建路由实例
    createWebHistory  // 路由模式·
  } from 'vue-router' // 插件
  // 页面级别组件放到views文件夹中
  import Home from '../views/Home.vue'
  import About from '../views/About.vue'
import PostIndex from '../views/post/index/post-index.vue'
  
  // 路由配置
  const routes = [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/posts',
      component: PostIndex
    }
  ]
  
  // 创建一个路由实例，用于管理应用的路由
const router = createRouter({
  // 使用 HTML5 的 history 模式，URL 不会包含哈希符号（#）
  history: createWebHistory(), 
  // 引入路由配置，定义了应用的路由规则
  routes 
})

  
  export default router

About.vue

template>
    <div>
      About
    </div>
  </template>
  
  <script setup>
  
  </script>
  
  <style  scoped>
  
  </style>

Home.vue

template>
    <div>
    Home
    </div>
  </template>
  
  <script setup>
  
  </script>
  
  <style  scoped>
  
  </style>

post-index.vue

<template>
    <div>
      PostIndex
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>

正在学习vue的小伙半赶紧动手实践一下吧

avatar
文章
阅读
粉丝