基于 Vue 2 手写一个简易的 Vue-router

2023-11-11 07:18:56

简介

Vue-router 是一个前端路由框架，用于构建单页面应用 (SPA)。它允许您在应用程序中定义不同的路由，并通过导航到不同的 URL 来切换这些路由。Vue-router 还提供了许多有用的功能，如路由守卫、历史记录模式和过渡效果。

实现一个简易的 Vue-router

1. 安装依赖

npm install vue
npm install vue-router

2. 创建一个新的 Vue 项目

vue create my-vue-router-app

3. 在 `main.js` 中配置 Vue-router

在 main.js 文件中，导入 Vue 和 Vue-router，并创建一个新的 Vue 实例。

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  // 定义路由规则
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

4. 创建路由组件

在 components 目录下，创建两个路由组件 Home.vue 和 About.vue。

// Home.vue
<template>
  <h1>Home</h1>
</template>

// About.vue
<template>
  <h1>About</h1>
</template>

5. 在 `App.vue` 中使用路由

在 App.vue 文件中，使用 router-view 组件来显示当前的路由组件。

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>

    <router-view />
  </div>
</template>