vue2.0和vue1.0路由對比以及腳手架初始路由分析
阿新 • • 發佈：2019-01-28
2.0新版本路由相比1.0在使用上做了一些改動，但核心思想並未改變，接下來稍作分析和對比，使用路由之前都需要引入vue-router.js檔案
一、兩個路由版本的初步分析
1.0
.js
/*1.建立根元件 必須得要有一個根元件*/
var app = Vue.extend();
/*2.建立路由物件*/
var router = new VueRouter();
/3.建立模板 注意通過Vue.extend建立，也可以從外部匯入*/
var home = Vue.extend({
template:'<h1>首頁</h1><p>aaaaa</p>' .html
<div id="app">
<!--1.設定跳轉路由-->
<li><a v-link="{path:'/home'}" 2.0
.js
//1.建立模板 可以從其他檔案 import 進來
const home = {
template:'#home_tpl'
};
const music = {
template:'<h1>音樂</h1>'
};
const singer = {
template:'<h1>歌手</h1>'
};
/*2.配置路由 以及子路由*/
const routes = [ //在錨點之前必須得要加上"/"
{path:'/home',component:home,
children:[
{path:'login',component:music}, /*在子路由當中不要新增“/”*/
{path:'regist',component:singer},
]
},
{path:'/music',component:music},
{path:'/singer',component:singer},
//預設路由
{path:'/', redirect:'/home'}
];
/*3.建立路由物件 把上一步建立的routes新增進來*/
const router = new VueRouter({routes});
/*4.使用路由 也要掛載根例項*/
new Vue({
router,
el:'#app'
});
.html
<div id="app">
<!--5.設定路由跳轉 to用來指定連結 預設會渲染成一個a標籤-->
<router-link to="/home">首頁</router-link>
<!--6.設定佔位符跟1.0一樣-->
<router-view></router-view>
</div>二、vue cli腳手架路由分析
腳手架生成vue專案的過程在這裡不在詳細說明，大體過程是：
1、安裝node.js 官網可下載 進行傻瓜式安裝，安裝完成後會預設會一起安裝npm，命令列輸入node -v和npm -v出現相應版本即安裝成功
2、npm install vue-cli -g 用npm進行全域性安裝vue-cli
3、vue init webpack 專案名
4、cd 專案名
5、npm install
6、npm run dev
專案會自動跑起來，但可能會出現埠號佔用的情況，我們可以在config目錄裡的index.js檔案中換掉預設的8080埠或者是命令列執行
命令一：netstat -ano|findstr 8080 （找到佔用8080埠的程式，把下面命令二中的#換成輸入命令一後出現的LISTENING後面的一串數字，即可解除本端口占用）
命令二：taskkill /pid #### /f 這裡的腳手架用的是2.0版本，下面主要分析一下自動生成的初始檔案：
我們主要在src目錄下面寫程式碼，先來看main.js也就是入口檔案，我們都會從這裡先下手
1、main.js
import Vue from 'vue'//匯入vue，預設是從node_modules目錄裡面的vue目錄下的dist資料夾裡尋找同名js檔案並匯入的。具體匯入的是什麼不做具體說明，這裡我們理解為一個必須要匯入的核心檔案
import App from './App'//匯入本目錄下的APP.vue檔案 也就是上面圖中main.js上面的APP.vue，./代表本層目錄下
import router from './router'//我們在用腳手架生成專案時有提示選項要不要
安裝路由router模組，回車的話代表安裝，這裡匯入的是本層目錄下router資料夾中
的index.js檔案，這個index.js檔案主要用來配置路由，後面詳說，也就是這個
main.js檔案並不處理和配置路由，他只需要匯入專門處理路由的js檔案就好了。
Vue.config.productionTip = false
//使用路由並掛載例項
new Vue({
el: '#app',
router,//把匯入的路由檔案也就是上面的router資料夾下的index.js拿進來
template: '<App/>',//使用上面已經import進來的APP.vue元件，並掛載APP.vue元件在html中的id為app的元素。注意這裡如果我們不使用元件時，那麼會自動尋找本檔案中的id為app的元素進行掛載。
components: { App }
})
我們總結一下這個main.js檔案到底幹了一件什麼事，匯入全域性的路由並把路由掛載在APP.vue元件上，讓路由在這個元件上全域性生效可用，好了。
2.router/index.js
我們把所有和路由相關的東西，包括路由要依賴的js檔案，配置的路由等等都放在這個檔案裡，條理清晰。
import Vue from 'vue'
import Router from 'vue-router'//預設匯入node_modules/vue-router/dist/vue-router.js檔案，也就是匯入我們使用路由功能時要依賴的js檔案
import Hello from '@/components/Hello'//匯入components下面的Hello.vue檔案，也就是元件
Vue.use(Router)//我們匯入依賴的路由檔案後要註冊使用
export default new Router({//建立路由物件並配置路由，順便把路由例項物件暴露出去以便其他檔案引入
routes: [
{
path: '/', //當路由地址為根地址時訪問的就是Hello.vue檔案
name: 'Hello',
component: Hello//匯入的Hello.vue元件
}
]
})
3.APP.vue
這個元件相當於一個父元件，全域性的路由上面介紹過就是掛載在這個檔案中的，元件一般都包括三部分template，script，style對應結構 行為和樣式。
<template>
<div>
<img src="./assets/logo.png">
<router-view></router-view><!-->掛載在哪 哪裡就要寫這個佔位標誌<-->
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style></style>
4.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
<!-->我們的全域性路由就是掛載在這個id為app的元素上的<-->
</body>
</html>