vuejs之路由應用之二
現在我們開始一個應用：
一個應用中包含4個組件，我們暫且可以想象是4個頁面，首先是App.vue，App.vue中又包含3個子組件：About.vue，Home.vue，Document.vue
App.vue中包含三個鏈接 about,home,document，點擊about進入About,點擊home進入Home,點擊home進入Document,如圖所示：
App.vue中的代碼：
<template> <div id="app"> <div class="nav"> <router-link to="/about">about</router-link> <router-link to="/home">home</router-link> <router-link to="/document">document</router-link> </div> <router-view class="fontBig"/> </div> </template>
<router-view>:就是路由對應組件顯示的地方
About.vue的代碼：
<template> <div>about</div> </template>
Home.vue的代碼：
<template> <div>home</div> </template>
Document.vue的代碼：
<template> <div>document</div> </template>
組件代碼都準備好后，然后在router/index里面配置路由：
import Vue from 'vue' import Router from 'vue-router' import Home from '@/components/Home' import About from '@/components/About' import Document from '@/components/Document' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/home', name: 'home', component: Home }, { path: '/about', name: 'about', component: About }, { path: '/document', name: 'document', component: Document } ] })
routes中的參數配置：path指的是url地址，component:指的是url地址對應的組件，name:可省。里面配置了三個路由信息。
在 App.vue中有三個超級鏈接： <router-link to="/about">about</router-link> <router-link to="/home">home</router-link> <router-link to="/document">document</router-link>
點擊鏈接，URL地址改變，同時與URL對應的組件也就隨之改變。
有人會問為什么不是a鏈接，而是router-link,router-link是vue內置組件，在a鏈接的基礎上，進行了封裝。阻止默認行為，在hash模式下自動添加#，等等。因為用a鏈接頁面會跳轉刷新。
另外要提的是路由的模式配置mode,mode有兩種模式，模式一是：hash模式，是默認的模式，模式一可以支持低版本的瀏覽器。但是在瀏覽器的地址欄url地址會有#，
例如：http://localhost:8080/#/或 http://localhost:8080/#/document ，很不雅觀。但可支持低版本瀏覽器。而模式二，history模式，地址正常 http://localhost:8080/document
適用于高版本的瀏覽器，因為瀏覽器需要支持pushState方法。今天vue-router就講到這里，注意幾點：1 router-link取代超鏈接a, 2 router/index 的路由配置mode參數的配置
浙公網安備 33010602011771號