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

最近在學習Vue，學習Vue必定離不開vue-cli腳手架的運用，這里給大家梳理一下vue-cli的相關文件以及其調用關系。

話不多說，直接上圖（筆者從網上找的）

 

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

1、index.xml為vue項目默認首頁，里面默認引用了app.vue根組件

2、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>