vue2.0学习之路由

 下载vue-router: cnpm install vue-router --save

router/main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*引入所需要的组件*/
    import VueRouter from 'vue-router';
    import about from "compontents/about.vue"
    import news from "compontents/news.vue"
    import Router from 'vue-router'
    import VueResource from 'vue-resource';
 
    Vue.use(VueRouter);
    Vue.use(VueResource);
    Vue.use(Router);
 
    const routes = [ //这里是routes,没有r
      { path: '/goods', component: goods },
      { path: '/ratings', component: ratings },
      { path: '/seller', component: seller }
    ];
    const router = new VueRouter({
      routes,
      linkActiveClass:'active'
    });
    router.push('/goods');
     
    new Vue({
        el:'#app',
        router,
        template:'<App/>',
        components: { App }
    })

  compontents/about.vue 与compontents/news.vue 一样

1
2
3
4
5
6
7
8
9
10
11
<template>
    <div>
        我是关于我们/我是新闻
    </div>
</template>
 
<script>
    export default {
 
    }
</script>

  将about.vue和news.vue链接起来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
    <div id="app">
        <div class="tab">
            <div class="tab-item">
                <router-link to="/about">关于</router-link>
            </div>
            <div class="tab-item">
                <router-link to="/news">新闻</router-link>
            </div>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

  

posted @   甜甜宝宝  阅读(257)  评论(1编辑  收藏  举报
点击右上角即可分享
微信分享提示