vue-router的基本使用和配置
1.在main.js檔案中引入相關模組以及元件及例項化vue物件配置選項路由及渲染App元件 預設設定如下:
1 import Vue from 'vue' 2 import App from './App' 3 import router from './router/index.js'// 引入路由 4 Vue.config.productionTip = false 5 6 /* eslint-disable no-new */ 7 new Vue({ 8el: '#app', 9router, // 在掛載點中注入vue 10components: { App }, 11template: '<app/>' 12 })
2.自定義配置路由路徑,在src 下 router/index.js 檔案中配置路由路徑
1 import Vue from 'vue' 2 import Router from 'vue-router'// 引入vue-router 3 4 // 引入要跳轉的vue元件 5 import Manage from '@/page/admin/Manage' 6 import userList from '@/page/admin/userList' 7 import addUser from '@/page/admin/addUser' 8 import shopList from '@/page/admin/shopList' 9 import addShop from '@/page/admin/addShop' 10 11 Vue.use(Router)// 在vue中注入Router 12// 配置路由路徑 13 const routes =[ 14{ 15path: '/', 16name: 'Login', 17component: Login// 需要跳轉的元件 18}, 19{ 20path: '/Manage', 21name: 'Manage', 22component: Manage, 23children: [{ 24path: '/userList', 25component: userList, 26meta: ['資料管理', '使用者列表'] 27}, 28{ 29path: '/shopList', 30component: shopList, 31meta: ['資料管理', '商品列表'] 32}, 33{ 34path: '/addUser', 35component: addUser, 36meta: ['新增資料', '新增使用者'] 37}, 38{ 39path: '/addShop', 40component: addShop, 41meta: ['新增資料', '新增商品'] 42} 43] 44}, 45 46{ 47path: '/home', 48name: 'Home', 49component: Home 50}, 51{ 52path: '/helloworld', 53name: 'Home', 54component: HelloWorld 55} 56 ] 57 // 將路徑注入到Router中 58 var router=new Router({ 59'mode': 'history', 60routes 61 }) 62 // 匯出路由 63 export default router;
3.在頁面中使用路由
在vue-router中, 我們也可以看到它定義了兩個標籤<router-link> 和<router-view>。<router-link> 就是定義根據某個路徑跳到某個元件的標籤,<router-view> 就是點選後,元件顯示內容的標籤。所以 <router-link> 還有一個非常重要的屬性 to, 它定義點選之後,要到哪個路徑下 , 如:<router-link to="/home">Home</router-link>。