main.js

// main.js // 1.1 導入路由的包 import VueRouter from 'vue-router'// 1.2 安裝路由 Vue.use(VuerRouter)// 1.3 導入自己的router.js模塊 import router from './router.js'// 1.4 掛載router對象在vm實例上 const vm = new Vue({el: '#app',router })

app.vue

• 原本的 a 標簽需改為 router-link.
• href屬性需改為to

// (原生)栗子 < a class="mui-tab-item mui-active" href="#tabbar"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首頁</span> </a>// (使用vue-router之后的熟)栗子 <router-link class="mui-tab-item mui-active" to="/home"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首頁</span> </router-link>

配置路由激活樣式(高亮類).

// router.js // 1.1 導入 vue-router import VurRouter from 'vue-router'// 1.2 創建路由對象 var router = new VueRouter({routes:[], // 這一行創建自己的路由規則linkActiveClass: 'mui-active' // 這里假設了高亮類為 mui-active })// 1.3 導出自己的路由 export default router

配置路由規則

// router.js // 1.從其他頁面導入,做好的路由組件 import HomeContainer from './lib/components/tabbar/HomeContainer.vue' import MemberContainer from './lib/components/tabbar/MemberContainer.vue' import ShopcarContainer from './lib/components/tabbar/ShopcarContainer.vue' import SearchContainer from './lib/components/tabbar/SearchContainer.vue'// 2.在路由對象上設置路徑和路由組件的對應規則 var router = new VueRouter({routes: [{ path: '/home', component: HomeContainer },{ path: '/member', component: MemberContainer },{ path: '/search', component: SearchContainer },{ path: '/shopcar', component: ShopcarContainer },// 配置路由規則] })// app.vue // 在主區域中顯示路由組件 <template> <div> <!-- 頂部區域 -->...<!-- 中間路由 router-view --> <router-view></router-view><!-- 底部 tabbar 區域 --> ....

總結

以上是生活随笔為你收集整理的vue --- vue-router(项目模式的导入)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。