一缸榛、安裝路由模塊
要在自己的Vue項目中使用路由，首先要通過以下命令來安裝路由模塊vue-router
npm install vue-router --save-dev
# 如果你使用了淘寶鏡像淳梦，可以使用cnpm來安裝，速度更快
cnpm install vue-router --save-dev
我們這里配置的是全局路由，所以下面的操作都是在Vue項目的入口文件 main.js 中進行的仔夺。
二、導(dǎo)入路由并使用中間件使用路由
同其他模塊一樣攒砖，我們要使用路由模塊缸兔，一定要使用import語句導(dǎo)入該模塊。除此之外吹艇，我們還需要使用Vue的中間件來使用路由模塊惰蜜。示例代碼如下：
import VueRouter from 'vue-router' // 引入路由
Vue.use(VueRouter) // 使用中間件使用路由
三、定義并初始化路由
完成路由模塊的引入和使用之后受神，我們要定義并初始化我們的路由抛猖。在初始化的過程中，主要是指定路由的路徑path和對應(yīng)的模塊component鼻听。示例代碼如下：
const router = new VueRouter({
routes: [
{
path: '/hello',
component: Hello
},
{
path:'/feng',
component:Feng
}
]
})
上述代碼中定義了兩條路由hello和feng财著，并指定了他們對應(yīng)的模塊。這里要注意的是撑碴，我們一定要提前將這兩個模塊引入進來撑教，這樣我們才能正常使用。
在初始化路由的時候醉拓，我們還可以設(shè)置其他屬性伟姐。比如mode: 'history'收苏，可以去掉地址欄中的“#”。
四愤兵、將路由注入到全局
完成以上的工作倒戏，我們就定義好了路由，下面我們只需將路由注入到全局恐似，就可以在項目的其他組件中使用路由了杜跷。注入全局的工作很簡單，在 main.js 中添加一行代碼即可矫夷，示例代碼如下：
new Vue({
el: '#app',
router, // 將我們定義好的路由router應(yīng)用到全局
components: {App},
template: '<App/>'
})
五葛闷、使用路由
現(xiàn)在我們就可以在Vue組件中使用路由了。主要會使用到兩個標(biāo)簽：
-
<router-link to=" "></router-link>：就相當(dāng)于是a標(biāo)簽双藕，其中的to中填寫的是路由的路徑path -
<router-view></router-view>：我們點擊了一個路由淑趾，該路由對應(yīng)組件中的內(nèi)容會在這里渲染出來。
比如我們在 App.vue 組件中使用兩條路由忧陪，示例代碼如下：
<template>
<div id="app">
<router-link to="/hello">hello</router-link>
<router-link to="/feng">feng</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
data: function () {
return {}
}
}
</script>
<style>
</style>
關(guān)于Vue路由的更多知識扣泊，可以查看Vue Router官方文檔
