路由,其實(shí)就是指向的意思,當(dāng)我點(diǎn)擊頁(yè)面上的home按鈕時(shí),頁(yè)面中就要顯示home的內(nèi)容,如果點(diǎn)擊頁(yè)面上的about 按鈕,頁(yè)面中就要顯示about 的內(nèi)容。Home按鈕 => home 內(nèi)容, about按鈕 => about 內(nèi)容,也可以說(shuō)是一種映射. 所以在頁(yè)面上有兩個(gè)部分,一個(gè)是點(diǎn)擊部分,一個(gè)是點(diǎn)擊之后,顯示內(nèi)容的部分。
點(diǎn)擊之后,怎么做到正確的對(duì)應(yīng),比如,我點(diǎn)擊home 按鈕,頁(yè)面中怎么就正好能顯示home的內(nèi)容。這就要在js 文件中配置路由。
1.在main.js文件中引入相關(guān)模塊以及組件及實(shí)例化vue對(duì)象配置選項(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.在頁(yè)面中使用路由
在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>
。
總結(jié)
以上所述是小編給大家介紹的vue router的基本使用和配置教程,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com