VUE单页面 路由

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>

 6. 启动开发服务器

在项目根目录下，运行以下命令启动开发服务器：

npm run serve

原文地址：https://blog.csdn.net/weixin_46253800/article/details/143588190

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！