前言

在Vue.js中，路由是通过vue-router这个官方路由管理器来实现的。它允许你以单页面应用（SPA）的方式构建多视图的Web应用。通过路由，你可以控制URL的变化来展示不同的组件或内容，而无需重新加载页面。

路由

服务器中的路由

在服��器中路由指的是某个文件的路径，官方的定义为：服务器中的路由主要指的是一种映射关系，它定义了URL路径（或URL模式）与服务器上的资源（如文件、文件夹、处理函数或控制器等）之间的对应关系。

VUE中的路由

在Vue.js这样的前端框架中，路由是指一种机制，它允许我们根据URL的变化来渲染不同的组件或页面，而无需重新加载整个页面。这种机制是通过前端路由库（如vue-router对于Vue.js）来实现的，它允许我们构建一个单页面应用（SPA）

在单页面应用中，所有页面（或称为"视图"或"组件"）都是在客户端加载和渲染的，而不是通过传统的页面跳转（即发送HTTP请求到服务器并获取新的HTML页面）来加载的。这意味着，当用户与应用交互时，URL会发生变化，但页面本身不会重新加载；相反，应用会根据新的URL来渲染相应的组件或页面

vue-router

定义

vue 中的所有xxx.vue 文件都是一个组件，这个组件最终会被vue读取，并编译成一段div结构，挂载在唯一的html文件中，所以想要实现组件之间的切换很简单。

但是想要将某些组件当成页面来用，每个页面对应的url都不一样，是唯一的,默认情况下就行不通。

那么，我们就需要一个可以将代码片段的切换模拟成页面跳转的样子的这样一个手段，这就是vue-router。

入门

快速上手vue-router我们可以点击以下链接查阅官方文档，这个文档也是由IT界顶级大佬尤雨溪开源，是和vue.js文档一样适合中国宝宝体质的快速上手指南

入门 | Vue Router (vuejs.org)

安装依赖包

这里我们在node中1输入指令，安装 vue-router的第4个版本，这是目前最新的版本

js 复制代码

npm install vue-router@4

在node_modules查看是否下载成功

安装成功后启动项目

js 复制代码

npm run dev

开发掘金界面

我们以开发我们大掘金的界面为例，你将学会如何制作一个和掘金平台类似的高端又优秀的页面跳转机制

开发路由

在VUE框架的src文件夹下新建router文件夹，在其中新建index.js文件

来到index.js文件夹下，在其中进行基本准备工作

1. 引入`vue-router`相关函数：

go 复制代码

```
	import { createRouter, createWebHistory } from 'vue-router'
```

这行代码从`vue-router`包中导入了两个函数：`createRouter`和`createWebHistory`。

createRouter用于创建一个路由实例
createWebHistory用于创建一个基于HTML5 History API的历史记录管理器，这样的应用就可以使用URL的hash模式以外的模式（即history模式）进行路由跳转。

2.定义路由配置数组

js 复制代码

    const routers = []

定义一个路由配置数组，接下来我们需要在这里面进行多页面的url路径配置

3.创建路由实例

js 复制代码

const router = createRouter({ 
    history: createWebHistory(),
    routes: routers
 })

使用createRouter函数创建一个路由实例，并将它赋值给router常量。这个函数接受一个配置对象作为参数，该对象包含两个属性：history和routes。

history: createWebHistory()：这里使用createWebHistory()函数来创建一个history实例，告诉Vue Router使用HTML5 History模式进行路由跳转。
routes: routers：将之前定义的routers数组作为路由配置传递给routes属性。

4.导出路由实例（抛出）

将路由实例router 导出。这样可以在Vue应用的根实例中通过import语句来引入并使用这个路由实例

js 复制代码

    export default router

5.引入并使用抛出的路由实例

在mian.js中引入抛出的router。src文件可以简写成@，index.js文件可以省略。

js 复制代码

// 引入
    import router from './router/index'
// import router from '@/router'

// 使用
    createApp(App).use(router).mount('#app')

连接界面

`router-link`

router-link 是 Vue Router 提供的一个组件，用于在 Vue 应用中创建声明式的、可导航的链接。它的作用主要是让用户能够通过点击来导航到不同的 URL，而这些 URL 是由 Vue Router 管理的路由路径。

`router-view`

uter-view是Vue Router提供的核心组件之一，它实现了路由组件的动态渲染和页面的动态切换。通过router-view，开发者可以构建出功能丰富、用户体验良好的单页面应用。同时，router-view还支持嵌套路由、命名视图和过渡效果等高级功能，为开发者提供了更多的灵活性和可能性。

简单来说，router-link 为我们的界面配置了url ，在其中添加to="/xxx"会使我们跳到对应的xxx界面;router-view是其他界面接入路由的入口。基于此我们可以将主页面的连接跳转配置好

js 复制代码

<template>
  <div>
      // 导航栏
    <nav>
      <router-link to="/home">首页</router-link>|
      <router-link to="/bot">BOT</router-link>|
      <router-link to="/hot">沸点</router-link>
    </nav>

    <!-- 路由接口 -->
    <router-view></router-view>
  </div>
</template>

配置路径

接下来我们需要配置我们的路由路径。在router文件夹的index.js 页面中我们需要通过import引入页面所在的位置，引入2方法通常有两种。我们还可以通过redirect设置默认路由，这样当登入网站时将会自动跳转到这个页面。

js 复制代码

import home from '../components/Home.vue'

const routes = [
   {   // 配置默认路由    
        path: '/',
        redirect: '/hot'
    },
    {   // 引入路由的第一种方法
        path: '/home',
        component: home
    },
    {   // 引入路由的第二种方法
        path: '/bot',
        component: () => import('../components/Bot.vue')
    },
    {
        path: '/hot',
        component: () => import('../components/Hot.vue')
    }
]

开发二级导航

作为刚入门的新手我们可以先实现三个页面的相互跳转和对应页面展现来模拟项目开发。通过连接页面 和配置路径我们已经能够实现页面和路径的正常跳转。

在单个页面中我仍可以继续配置，如果我想在home page中新增最新文章和最新文章的话，只需要重复根组件中的步骤，在router中的对应路由下面继续配置

html 复制代码

        // 在Home.vue文件中
        <nav>
            <router-link to="/home/newest">最新文章</router-link>|
            <router-link to="/home/suggest">推荐文章</router-link>
        </nav>

index.js 复制代码

        // 在routes中的对应路径继续向下配置
     {
        path: '/home',
        component: Home,
        children: [
            {
                path: '/home',
                redirect: '/home/newest',
            },
            {
                path: '/home/newest',
                component: () => import('../pages/home/Newest.vue')
            },
            {
                path: '/home/suggest',
                component: () => import('../pages/home/Suggest.vue')
            }
        ]
    }

实现页面内点击跳转

在一个页面内点击按钮去往另一个页面需要给这个按钮绑定点击事件,从vue-router中引入辅助函数 useRouter,之后立即调用他，这个函数会帮助我们在js中跳转路由。在你绑定的执行函数中，直接通过router.push(),在其中传入你需要跳转的页面就能立刻跳转。比如去hot沸点页面的执行操作就是router.push('./hot')。在实际的开发中,一个界面中往往有多个跳转按钮同时跳转到一个页面，开发者们通常会为不同的按钮加上不同的id参数，这个参数由query携带。

js 复制代码

mport { useRouter } from 'vue-router'

const router = useRouter()

const toHot = () => {
    //跳转到沸点页面
    router.push({ path: '/hot', query: { id: 1 } })
}

最后

最后我们基本实现了页面的跳转效果，实现效果如下

VUE入门：利用路由实现多页面跳转

前言

路由

服务器中的路由

VUE中的路由

vue-router

定义

入门

安装依赖包

开发掘金界面

开发路由

1. 引入vue-router相关函数：

2.定义路由配置数组

3.创建路由实例

4.导出路由实例（抛出）

5.引入并使用抛出的路由实例

连接界面

router-link

router-view

配置路径

开发二级导航

实现页面内点击跳转

最后

1. 引入`vue-router`相关函数：

`router-link`

`router-view`