前端路由管理

前端路由管理简介：

当谈到前端路由管理时，通常指的是在单页面应用程序（SPA）中管理页面间导航和URL的过程。路由管理器是一个工具，可以帮助前端开发者定义应用程序的不同视图之间的关系，同时能够响应URL的改变。

具体步骤:

在讲这个路由具体步骤之前：

先来看这一段页面跳转的代码，我们是通过根据active的值来进行跳转页面的。

不过这样做出来，我们的url其实是没有改变的，只是切换了不同的页面。

所以，就需要我们下面的路由管理：

Vue-Router

Vue-Router 其实就是帮助你根据不同的 url 来展示不同的页面（组件），不用自己写 if / else

1：安装官方路由：

贴一个Vue-Router的官方文档

安装 | Vue Router (vuejs.org)

npm install vue-router@4

下载完之后可以在package.json文件中看到路由的依赖：

2：创建路由实例： 

在创建路由实例之前我们需要知道：

路由配置影响整个项目，所以建议单独用 config 目录、单独的配置文件去集中定义和管理。

有些组件库可能自带了和 Vue-Router 的整合，所以尽量先看组件文档、省去自己写的时间。

所以新建一个config文件包下面再创建一个router.ts

把我们创建的路由对象导入：

import Index from "../pages/Index.vue";
import Team from "../pages/Team.vue";
import User from "../pages/User.vue";
import Search from "../pages/Search.vue";


const routes = [
    { path: '/', component: Index },
    { path: '/team', component: Team },
    { path: '/user', component: User },
    { path: '/search', component: Search },
]

export default routes;

这一段可以参考官方文档的入门：

入门 | Vue Router (vuejs.org)

3：在main.ts文件中挂载router：

import { createApp } from 'vue'
import App from './App.vue'
// import {Button, NavBar} from "vant";
import {createWebHashHistory} from "vue-router";
import routes from "./config/router.ts";
import * as VueRouter from 'vue-router';

const app = createApp(App);
const router = VueRouter.createRouter({
    history: createWebHashHistory(),
    routes,
})
app.use(router);
app.mount('#app')
// const app = createApp(App);
// app.use(Button);
// app.use(NavBar);
// app.mount('#app')

4：在主页中设置我们的路由操作：

这里需要说一下：

<template>
  <h1>Hello App!</h1>
  <p>
    <strong>Current route path:</strong> {{ $route.fullPath }}
  </p>
  <nav>
    <RouterLink to="/">Go to Home</RouterLink>
    <RouterLink to="/about">Go to About</RouterLink>
  </nav>
  <main>
    <RouterView />
  </main>
</template>

在这个 template 中使用了两个由 Vue Router 提供的组件: RouterLink 和 RouterView。

不同于常规的 <a> 标签，我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能。我们将会在之后的部分深入了解 RouterLink 组件。

RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中，你可以把它放在任何地方，但它需要在某处被导入，否则 Vue Router 就不会渲染任何东西。

                                                                                                -------------------来自官方文档

看到我上面的例子你可以会想，直接就在van-tabbar这个组件中使用了to就可以直接跳转

其实这个是因为van-tabbar有属性，这个可以从Vant官方文档tabber中看到

如果没有这个属性：

应该需要再补充：

  <router-link to="/">Go to Home</router-link>
  <router-link to="/team">Go to Team</router-link>

设置之后，我们就可以看到带跳转的路由；