main.js

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

app.vue

• 原本的 a 標(biāo)簽需改為 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 導(dǎo)入 vue-router import VurRouter from 'vue-router'// 1.2 創(chuàng)建路由對(duì)象 var router = new VueRouter({routes:[], // 這一行創(chuàng)建自己的路由規(guī)則linkActiveClass: 'mui-active' // 這里假設(shè)了高亮類為 mui-active })// 1.3 導(dǎo)出自己的路由 export default router

配置路由規(guī)則

// router.js // 1.從其他頁面導(dǎo)入,做好的路由組件 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.在路由對(duì)象上設(shè)置路徑和路由組件的對(duì)應(yīng)規(guī)則 var router = new VueRouter({routes: [{ path: '/home', component: HomeContainer },{ path: '/member', component: MemberContainer },{ path: '/search', component: SearchContainer },{ path: '/shopcar', component: ShopcarContainer },// 配置路由規(guī)則] })// app.vue // 在主區(qū)域中顯示路由組件 <template> <div> <!-- 頂部區(qū)域 -->...<!-- 中間路由 router-view --> <router-view></router-view><!-- 底部 tabbar 區(qū)域 --> ....

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。