当前位置：首页 > JavaScript > Vue.js实战：使用Vue Router实现多页面应用

Vue.js实战：使用Vue Router实现多页面应用

一叶知秋2024-07-15 17:07:12JavaScript7

Vue.js 是一种流行的 JavaScript 框架，用于构建用户界面和单页应用程序。Vue Router 是 Vue.js 的官方路由管理器，用于实现多页面应用程序的路由功能。在本文中，我们将介绍如何使用 Vue Router 实现多页面应用程序的基本步骤和最佳实践。

安装和配置

确保已经安装了 Node.js 和 npm。然后，通过以下命令安装 Vue CLI：

npm install -g @vue/cli

使用 Vue CLI 创建一个新的 Vue.js 项目：

vue create my-vue-app

在项目创建过程中，选择“Babel”、“Router”和“Vuex”作为开发依赖。创建项目后，进入项目目录：

cd my-vue-app

安装 Vue Router：

npm install vue-router

创建路由文件

在 src 目录下创建一个名为 router 的文件夹，并在其中创建一个名为 index.js 的文件。在该文件中，导入 Vue 和 Vue Router，并定义两个路由组件：Home.vue 和 About.vue。

// src/router/index.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
});

修改主入口文件

在 src/main.js 中，导入路由配置并将其添加到 Vue 实例中。

// src/main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

创建页面组件

在 src/components 目录下创建两个新的 Vue 组件：Home.vue 和 About.vue。

Home.vue：

<!-- src/components/Home.vue -->

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page of our Vue.js application!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

About.vue：

<!-- src/components/About.vue -->

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page of our Vue.js application.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

添加路由导航

在 src/App.vue 中，使用 <router-link> 添加路由导航。

<!-- src/App.vue -->

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

现在，当用户点击不同的链接时，Vue Router 将根据路由配置加载相应的组件。