浅入浅出 如何快速创建vue3的vue-router

哈喽哈喽，我是你们的金樽清酒。vue-router是做vue项目的不可或缺的功能。它能让单页页面的开发更加的高效，达到多页应用的展示效果。就像把某一个片段展示给你看一样。十分契合vue组件化的思想。那废话不多说，今天我就浅入浅出一下，如何搭建配置vue-router。

安装vue-router

首先我们需要在已经创建好的vue项目上安装vue-router。

npm install vue-router@4//npm 安装
yarn add vue-router@4//yarn 安装
pnpm add vue-router@4//pnpm 安装

新建router文件夹对vue-router进行配置

这是文件的路径。components理由有两个组件，router里面有个router.js进行路由的配置。

import { createMemoryHistory, createRouter } from "vue-router";
import Home from '../components/home.vue'
import About from '../components/about.vue'
//对路由进行一个基础的配置。
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: About
    }
]
const router = createRouter({
    history: createMemoryHistory(),
    routes,
})
export default router

用ES模块中的import引入createMemoryHistory, createRouter，和引入要跳转路由的组件。 定义routes来进行参数配置，配置path，name和和路径展示的组件。然后实例化createRouter传入参数。 并抛出。

在main.js中进行全局的注册

import { createApp } from 'vue'
import store from './store/index'
import router from './router/router'
import App from './App.vue'

const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')

在main.js里面引入我们刚抛出的router模块，并ues注册。 注意，用多个模块注册时，一定要实例并多次ues(),因为use里面只能一个参数。也就是说我这里有个router和store不能写成createApp(App).use(router,store)。或者可以另起一个文件进行配置，使得main.js更加的简洁。

App.vue

<template>
  <div>
    <h1>learn vue-router</h1>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about"> About</RouterLink>
    </nav>
    <button @click="jump">跳转到about</button>
    <RouterView />
  </div>
</template>

<script setup>
import { RouterLink, RouterView, useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter()
const jump = () => {
  router.push("/about");
  console.log(route.fullPath);
};
</script>

<style lang="scss" scoped></style>

然后我们需要用RouterLink来跳转路由，to里面写要跳转的已配置好的路径。并用表示在哪个页面展示，我们可以不在app.vue展示。然后在js里面引入RouterLink, RouterView。

useRoute, useRouter

在vue-router里面，还有uesRoute和useRouter。它们有什么用呢？在vue2中，全局注册router之后，路由器实例将被暴露为 $router。当前路由会被暴露为 $route。然而在vue3中就不会暴露，通过引入 useRoute, useRouter来实例化router和route。 router是路由器，里面有各种方法，而route是当前路由，可以获得当前路由的信息。

比如用roter.push跳转路由和打印当前页面的fullPath。

好啦，vue-router我们就浅入浅出到这里啦。我们下次再见。