vue路由

前言

我们知道vue框架构造的是一个单页面，它不同于传统方法有很多html文件，只有一个html文件，vue文件被挂载到唯一的html中，其中通过路由实现页面的切换和导航的功能。

路由 Router

官方对路由的定义是这样的：(入门 | Vue Router (vuejs.org))

Vue Router 是 Vue 官方的客户端路由解决方案。

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

像掘金网站页面切换就用到了路由

接下来我们完成一个类似的功能:

首先要在安装依赖并配置(具体过程可以去官网仔细查看(安装 | Vue Router (vuejs.org))

根据自己的包管理工具选择（npm，yarn，pnpm），

npm install vue-router@4

如果你打算启动一个新项目，你可能会发现使用 create-vue 这个脚手架工具更容易，它能创建一个基于 Vite 的项目，并包含加入 Vue Router 的选项

npm create vue@latest

在终端中可以选择安装路由

安装完成后引入到main.js中

import App from './App.vue'
import router from './router/index.js'

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

如果你用npm create vue@latest创造了一个项目并选择引入了vue router你会发现在项目中有一个router文件夹，里面有一个index.js文件，然后进行路由配置

import {createRouter,createWebHistory} from 'vue-router'
import Home from '../pages/Home.vue'
import Bot from '../pages/Bot.vue'
import Hot from '../pages/Hot.vue'

const routes=[
    {
        path:'/home',
        component:Home,
     },
          
    {
        path:'/bot',
        component:Bot,
    },
    {
        path:'/hot',
        component:Hot
        // component:()=>import('../pages/Hot.vue')//这样写引入就不用写了
    }


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

export default router

我们再创建一个导航栏，并在src下创建pages文件夹创建三个我们要跳转的页面

<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>

<script setup>

</script>

<style lang="css" scoped>

</style>

以上就是一级路由接下来看看二级路由

1.首先我们想要的效果是在首页出现“最新”和“推荐”,先创建两个组件

2.home页代码如下

<template>
    <div>
      <h2>home page</h2>
      <div class="nav">
        <router-link to="/home/newest">最新</router-link>
        <router-link to="/home/suggest">推荐</router-link>
      </div>


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

<script setup>

</script>

<style lang="css" scoped>

</style>

3.配置路由 因为“最新”和“推荐”是“首页”的子页面，所以：

import {createRouter,createWebHistory} from 'vue-router'
import Home from '../pages/Home.vue'
import Bot from '../pages/Bot.vue'
import Hot from '../pages/Hot.vue'

const routes=[
    {
        path:'/',
        redirect: '/home'
    },
    {
        path:'/home',
        component:Home,
        children:[
            {
                path:'/home',
                redirect: '/home/suggest'
            },
            {
                path:'/home/newest',
                component:()=>import('../pages/home/Newest.vue')
            },
            {
                path:'/home/suggest',
                component:()=>import('../pages/home/Suggest.vue')
            }
        ]
    },
    {
        path:'/bot',
        component:Bot,
    },
    {
        path:'/hot',
        component:Hot
    }
]

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

export default router

有用重定向，页面默认在/home/suggest下，即使地址将/home/suggest删除也会跳到该页面

总结

vue-router的作用就是将不同的代码组件切换的方法，使开发更加简单快捷。