vuejs之路由應用之一

什麼是‘路由’，路由相當於一個映射，一個url地址對應一個組件，當url地址A變為url地址B,那麼對應地址A的組件就會改變為對應地址B的組件。應用於spa,即：單頁應用，url地址改變，它不會跳轉頁面，只會用url對應的模塊取代上一個url對應的模塊，始終都在一個頁面操作。取代了傳統的多頁應用。值得高興的是，雖然，都在一個頁面進行操作，但是瀏覽器的‘前進’，'後退'都可以正常使用。

路由的使用步驟：1：安裝路由  npm i vue-router --save 

2：引入模塊：

import Router from 'vue-router'

import Vue from 'vue'  import Home from '插件路徑'

3：作為Vue的插件：

Vue.use(Router)

4：實例化路由：

let router=new Router({ routes:[{path:'/',component:'Home'}]);

5：default export router

註意：2,3,4步驟都寫在router/index.js頁面，以後需要添加新的view視圖都可以在該頁面配置對應的路由  

6 ：告訴路由渲染的位置：<router-view></router-view>

7:在main.js中導入路由模塊

import Vue from 'vue'

import App from '路徑'

import router from './router'

new Vue({

el:'#app',

router,

template:'<App/>',

components:{App}

)}