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

使用到vue項目的文件包括一個.html，兩個.js，兩個.vue文件，關系如上圖所示
1、index.html為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中的

。
router：為router:router,的簡寫，指向引入文件中的routes:[]
components：注冊哪些組件，需在頂部引入文件。
template：替換掛載元素的模板組件，而掛載元素的內容都將被忽略。即用template替換index.html里面的

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 標簽
返回path為/的路徑

2.方法中調用
this.$router.push('/');

路由地址中傳參
1.
2.this.$router.push({path:'/mainPage',query:{title:'首頁',mcontent:'首頁內容在此'}});

接收參數

{{$route.query.title}}-{{$route.query.mcontent}}