Vue-Cli腳手架文件main.js、App.vue、index.html、index.js詳解

最近在學習Vue，學習Vue一定離不開vue-cli腳手架的運用，這裏給你們梳理一下vue-cli的相關文件以及其調用關係。

話很少說，直接上圖（筆者從網上找的）

 

   使用到vue項目的文件包括一個.html，兩個.js，兩個.vue文件，關係如上圖所示

一、index.xml爲vue項目默認首頁，裏面默認引用了app.vue根組件

二、main.js爲vue項目的入口文件，加載了各類公共組件(須要引用和初始化組件實例)。好比app.vue

main.js中引入相關資源文件

引入Vue實際完整寫法是   import Vue from "../node_modules/vue/dist/vue.js，即從node_modules中加載相應名稱的模塊

import App from './App'就是引入同目錄層次下的App.vue文件

import router from './router'，引入路由文件

初始化組件實例

其中new Vue的參數，解釋以下：

el：官方解釋爲實例提供掛載的元素。此處爲index.html中的<div id="app"><div>。
router：爲router:router,的簡寫，指向引入文件中的routes:[]
components：註冊哪些組件，需在頂部引入文件。
template：替換掛載元素的模板組件，而掛載元素的內容都將被忽略。即用template替換index.html裏面的<div id="app"></div>

index.js路由文件

首頁看看index.js文件的內容

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import First from '@/components/First' Vue.use(Router) export default new Router({ model:'history', routes: [ { path: '/hello', name: 'HelloWorld', component: HelloWorld }, { path: '/', name: 'First', component: First } ] })

內容主要包含引入相關資源以及初始化路由兩部分

 vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。

若是不想要很醜的 hash，咱們能夠用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面。

 

路由的引用方式

1.router-link 標籤

 <router-link to="/">返回path爲/的路徑</router-link>

2.方法中調用

this.$router.push('/');

路由地址中傳參
1.<router-link v-if="ok" :to="{path:'/mainPage',query:{title:'首頁',mcontent:'首頁內容在此'}}"></router-link>
2.this.$router.push({path:'/mainPage',query:{title:'首頁',mcontent:'首頁內容在此'}});

接收參數

<h3>{{$route.query.title}}-{{$route.query.mcontent}}</h3>