还对Vue的路由指向有疑问吗？Router入门使用

前言

在前端Vue框架的学习中，Vue中的路由Router是其很重要的特性之一，它的存在实现了性能更优、用户体验更好的单页应用(SPA)效果，能够使不同的组件和视图在同一个页面中展示，大大提高了开发页面的效率。那么接下来我们就来了解这个强大的路由，由它来领航页面的跳转。

手搓简单的路由

如果你只需要一个简单的页面路由，而不想为此引入一整个路由库，你可以通过动态组件的方式，监听浏览器 hashchange 事件或使用 History API 来更新当前组件。

下面是一个简单的例子：

<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'
const routes = {
  '/': Home,
  '/about': About
}
const currentPath = ref(window.location.hash)
window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})
const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>
<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>

导入Router库实现

但是上面实现路由的方法，其实多出一些操作我们在实际开发项目中是可以省去的，这时我们就应该用到Router库，引入Vue官方的路由库，具体操作和使用如下：

一、引入Router库

如果你还没有安装 vue-router，可以通过 npm 或 yarn 进行安装：

Bash
深色版本
npm install vue-router
# 或者
yarn add vue-router

二、 创建路由器

首先，你需要创建一个路由器实例，并定义你的路由规则。这通常在一个单独的文件中完成，例如 router.js 或 router/index.js。通过createRouter来创建一个router实例，接受history参数和routes参数。routes为路由配置信息，各个path对应相应的组件component

Javascript
深色版本
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent },
  // 更多路由...
];

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

export default router;

三、导入路由器到主应用文件 在你的主应用文件中（通常是 main.js 或 main.ts），导入并使用这个路由器。

Javascript
深色版本
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 导入刚刚创建的路由器

const app = createApp(App);
app.use(router); // 使用路由器
app.mount('#app');

最后一步是将Router使用到你的组件中 在你的布局组件中，使用 <router-view> 标签来渲染匹配到的组件。RouterLink是将url跳转到to对应的相应路径，RouterView充当一个占位符，将路由中的相应路径对应的组件显示渲染在RouterView中。

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