您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue中router怎么配置使用,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
路由,其實(shí)就是指向的意思,當(dāng)我點(diǎn)擊頁面上的home按鈕時(shí),頁面中就要顯示home的內(nèi)容,如果點(diǎn)擊頁面上的about 按鈕,頁面中就要顯示about 的內(nèi)容。Home按鈕 => home 內(nèi)容, about按鈕 => about 內(nèi)容,也可以說是一種映射. 所以在頁面上有兩個(gè)部分,一個(gè)是點(diǎn)擊部分,一個(gè)是點(diǎn)擊之后,顯示內(nèi)容的部分。
點(diǎn)擊之后,怎么做到正確的對應(yīng),比如,我點(diǎn)擊home 按鈕,頁面中怎么就正好能顯示home的內(nèi)容。這就要在js 文件中配置路由。
1.在main.js文件中引入相關(guān)模塊以及組件及實(shí)例化vue對象配置選項(xiàng)路由及渲染App組件 默認(rèn)設(shè)置如下:
import Vue from 'vue' import App from './App' import router from './router/index.js' // 引入路由 Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, // 在掛載點(diǎn)中注入vue components: { App }, template: '<app/>' })
2.自定義配置路由路徑,在src 下 router/index.js 文件中配置路由路徑
import Vue from 'vue' import Router from 'vue-router' // 引入vue-router // 引入要跳轉(zhuǎn)的vue組件 import Manage from '@/page/admin/Manage' import userList from '@/page/admin/userList' import addUser from '@/page/admin/addUser' import shopList from '@/page/admin/shopList' import addShop from '@/page/admin/addShop' Vue.use(Router) // 在vue中注入Router // 配置路由路徑 const routes =[ { path: '/', name: 'Login', component: Login // 需要跳轉(zhuǎn)的組件 }, { path: '/Manage', name: 'Manage', component: Manage, children: [{ path: '/userList', component: userList, meta: ['數(shù)據(jù)管理', '用戶列表'] }, { path: '/shopList', component: shopList, meta: ['數(shù)據(jù)管理', '商品列表'] }, { path: '/addUser', component: addUser, meta: ['添加數(shù)據(jù)', '添加用戶'] }, { path: '/addShop', component: addShop, meta: ['添加數(shù)據(jù)', '添加商品'] } ] }, { path: '/home', name: 'Home', component: Home }, { path: '/helloworld', name: 'Home', component: HelloWorld } ] // 將路徑注入到Router中 var router=new Router({ 'mode': 'history', routes }) // 導(dǎo)出路由 export default router;
3.在頁面中使用路由
在vue-router中, 我們也可以看到它定義了兩個(gè)標(biāo)簽<router-link>
和<router-view>
。<router-link>
就是定義根據(jù)某個(gè)路徑跳到某個(gè)組件的標(biāo)簽,<router-view>
就是點(diǎn)擊后,組件顯示內(nèi)容的標(biāo)簽。所以 <router-link>
還有一個(gè)非常重要的屬性 to, 它定義點(diǎn)擊之后,要到哪個(gè)路徑下 , 如:<router-link to="/home">Home</router-link>
。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“vue中router怎么配置使用”這篇文章對大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。