SPA項目目錄介紹

我們寫的代碼都在 src 目錄中

入口文件main.js介紹

入口文件，項目啟動之后會最先運行 main.js 文件
main.js代碼詳解

import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store'Vue.config.productionTip = falsenew Vue({router, // 裝載 vue-routerstore, // 裝載 vuexrender: h => h(App) // 渲染 App 組件 }).$mount('#app')

在 main.js 文件中會

1、引入 vue 、vue-router、vuex 框架包

2、引入 App 組件

3、創建 Vue 對象并且裝載 vue-router , vuex

4、渲染第一個組件：App.vue

所以我們運行之后看到的頁面就是 App.vue 組件的內容。

Vue-Router介紹

在 SPA 中，網站內容的變換實際上的組件的切換，為了方便的實現組件間的切換，Vue 框架引入了 vue-router 工具來實現多個組件之間的切換。

Vue-Router路由配置

router/index.js

1、當訪問 / 時，顯示 Home 組件

2、當訪問 /about 時，顯示 about 組件

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' // Vue對象的靜態方法 Vue.use(VueRouter) // 有一個頁面，在此處就需要配置一個路由 const routes = [{path: '/',name: 'home',component: Home},{path: '/about',// 就是url，就是未來訪問的路徑name: 'about',// 隨意component: () => import( '../views/About.vue')},{path: '/list',// 就是url，就是未來訪問的路徑name: 'list',// 隨意component: () => import( '../views/List.vue')}]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes })export default router

說明：

1、about 組件的寫法是延遲加載：在訪問 /about 路徑時才會加載該組件，這樣可以提高首屏顯示速度

2、/* webpackChunkName: “about” */ 的意思是將這個組件添加到 about 這個組中，當訪問 about 這個組件時就會添加所有 about 這個組中的組件

Vue-Router路由使用

當我們定義好路由之后，我們就可以在頁面中添加按鈕跳轉到相應的路由，有兩種跳轉方法：
1、在 HTML 中使用 router-link 標簽（相當于a標簽）
2、在 JS 中使用 router-push 實現跳轉（相當于 location.href ）

this.$router.push("切換組件的地址")

router-link標簽-html代碼中使用
我們可以在頁面中使用 router-link 標簽來制作可以跳轉的按鈕（相當于 a 標簽）：

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

說明：to 屬性用來指定點擊按鈕時要切換到的路由

this.$router.push-js腳本中使用

在 JS 中我們可以使用 this.$router.push 實現跳轉。

login(){console.log( '登錄成功' )// 跳轉到 /this.$router.push('/主頁面.vue') }

路由切換的兩種方式
router-link在HTML代碼中使用
this.$router.push在js腳本中使用

總結

以上是生活随笔為你收集整理的SPA项目目录介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。