vue2.0學習之路由
阿新 • • 發佈:2018-03-02
b- active new com emp post highlight view 沒有
下載vue-router: cnpm install vue-router --save
router/main.js
/*引入所需要的組件*/ 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 一樣
<template> <div> 我是關於我們/我是新聞 </div> </template> <script> export default { } </script>
將about.vue和news.vue鏈接起來
<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>
vue2.0學習之路由