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