前言
在使用過各種框架過后趾诗，想必很多人都被深深植入一個(gè)概念路由。而各個(gè)框架實(shí)現(xiàn)路由不盡相同歌殃，都有著各自獨(dú)有的特點(diǎn)扫步，不過路由最終的目的是殊途同歸的，跳轉(zhuǎn)頁(yè)面酸员，傳遞參數(shù)等蜒车，在此寫個(gè)關(guān)于vue-router的文章，一是復(fù)習(xí)幔嗦，二是加固對(duì)vue-router的認(rèn)識(shí)
vue-router的安裝
使用npm安裝即可酿愧，如果在初始化vue項(xiàng)目選擇了安裝vue-router，就不用繼續(xù)安裝邀泉，沒有的話嬉挡，執(zhí)行以下命令
#npm install vue-router --save
使用vue-router
前提已經(jīng)搭建好vue項(xiàng)目
新建router.js文件和vue模板文件hello.vue文件
hello.vue文件
<template>
<div>Hello</div>
</template>
router.js
import Router from 'vue-router'
import Vue from 'vue'
import Hello from './hello.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: '/'
},
{
path: '/',
component: Hello
}
]
})
模板入口文件app.vue
<template>
<router-view></router-view>
</template>
在vue入口文件引入
一般為main.js
import Vue from 'vue'
import App from './app.vue'
import router from './router'
new Vue({
el: '#app',
router,
template: '<App />',
components: { App }
})
這樣就完成一個(gè)簡(jiǎn)單的router，router的主要配置在router.js里完成呼渣，首先要使用Vue.use把Router掛載到vue實(shí)例上棘伴，用new Router()實(shí)例化router，并export出去屁置，Router()里面接受一個(gè)對(duì)象焊夸，主要為routes屬性，為一個(gè)數(shù)組（Array）蓝角，支持多個(gè)對(duì)象元素阱穗，每個(gè)元素對(duì)應(yīng)一個(gè)路由頁(yè)面配置。
routes對(duì)象元素參數(shù)意義
path：(string)path是路由的地址
component：(Component)component是路由指定的頁(yè)面使鹅，實(shí)質(zhì)為一個(gè)vue組件
children：(array)子路由揪阶，同樣是一個(gè)數(shù)組，類似routes患朱，支持多個(gè)對(duì)象元素
redirect：(string)重定向鲁僚，指定未匹配到的路由地址跳轉(zhuǎn)地址
詳細(xì)配置請(qǐng)參考vue-router文檔
