web前端vue：路由安装与配置

跟AngularJS一样，vue.js也很适合用来做大型单页应用。vue本身并没有提供路由机制，但是官方以插件（vue-router）的形式提供了对路由的支持，可以直接npm安装地址：

npm install vue-ruoter // 因为是以插件形式提供，所以需要使用Vue.use(ruoter)注册到vue对象上

安装的方式有很多：npm／bower／或者直接html的<script></script>的方式引入看个人喜欢。

基本的使用方式如下：

<div>
    <a @click="go('foot')">go foot</a> // 可以用v-link命令或者写个公共函数(go)或全局(go)导航
    <a @click="go('bar')">go bar</a>
    <router-view></router-view> // 路由外链
</div>

methods:{
    go(url){this.$router.push(url)}
}

首先一定要在main.js里引入 import routerfrom './router'，然后在router的目录里有index.js里写好路由
import Vue from 'vue'
import Router from 'vue-router'
import home '@/components/home'
import foot '@/components/foot'
import bar '@/components/bar'
Vue.use(Router)
export default new Router({
routes: [
{
path:'/',
    name:'home',
    component: home,
    children: [
    {
        path:'foot',
        component: foot
    },{
        path:'bar',
        component: bar
        }
]

到这里整个的路由案例配好了，有兴趣vue的同学可以加我噢（微信：nihaomeili87）