当前位置：首页 > article >正文

VUE单页面路由

article 2024/11/9 3:56:03

1. 安装 Vue 和设置项目

首先，确保你已经安装了 Node.js 和 npm（或 Yarn），然后使用 Vue CLI 创建一个新的项目。

安装 Vue CLI

如果你没有安装 Vue CLI，可以通过以下命令来安装：

npm install -g @vue/cli

创建项目

然后，使用 Vue CLI 创建一个新项目：

vue create my-vue-app

根据提示选择你需要的配置项，比如选择默认配置或手动配置。

进入项目文件夹

cd my-vue-app

2. 了解项目结构

Vue CLI 创建的项目包含几个重要的文件夹和文件：

src/: 存放应用的源代码
- assets/: 存放静态资源（如图片、字体）
- components/: 存放 Vue 组件
- views/: 存放视图页面组件
- router/: 存放路由相关的配置
- App.vue: 应用的根组件
- main.js: 应用的入口文件
public/: 存放公共文件，如 index.html 等。

3. 创建视图组件

在 Vue 中，单页面应用（SPA） 是通过不同的视图组件来展示的，这些组件一般存放在 src/views/ 文件夹中。

假设我们要做一个简单的 SPA，包含首页和关于页，我们可以创建两个视图文件：

Home.vue

<template>
  <div class="home">
    <h1>欢迎来到首页！</h1>
  </div>
</template>

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

<style scoped>
.home {
  text-align: center;
}
</style>

About.vue

<template>
  <div class="about">
    <h1>关于我们</h1>
  </div>
</template>

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

<style scoped>
.about {
  text-align: center;
}
</style>

4. 设置 Vue Router

Vue 的路由系统（Vue Router）负责在不同的视图组件之间切换。在单页面应用中，不同的 URL 会对应不同的视图。我们可以通过 Vue Router 来管理这些视图。

安装 Vue Router

如果使用 Vue CLI 创建的项目没有默认安装 Vue Router，你需要手动安装它：

npm install vue-router

配置 Vue Router

在 src/router/index.js 中，配置路由信息：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/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 Router 并将其添加到 Vue 实例中：

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router  // 将 router 添加到 Vue 实例中
}).$mount('#app')

5. 更新 `App.vue` 以显示路由

在 App.vue 中使用 <router-view></router-view> 来显示路由视图。

<template>
  <div id="app">
    <div>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </div>
    <router-view></router-view>  <!-- 这里会展示当前路由的视图 -->
  </div>
</template>

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

<style>
/* 添加一些简单的样式 */
</style>