Vue路由巢狀
阿新 • • 發佈:2020-09-01
一、路由配置
vue路由配置首先需要安裝vue-router,然後新增一個js檔案對路由進行管理,在main.js中對路由檔案進行引用
1.安裝vue-router
npm install vue-router
2.路由管理檔案
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); export default new Router({ routes: [ // 基礎路由{ path:'/', name:'login',//路由名稱 component:()=>import('@/components/login')//引用頁面路徑 這裡需要相對路徑 }, { path:'/dashboard', name:'dashboard', component:()=>import('@/components/dashboard')
]
})
3.main中引用路由管理檔案
import router from './routernewVue({ router, store, render:h=>h(App) }).$mount('#app')
4.使用路由跳轉頁面
this.$router.push({name:"dashboard"})//name路由名稱 可以增加param屬性傳動引數 也可以使用path路徑進行傳參
<router-link to="/path路徑">點選跳轉</router-link>//
router-link傳參
二、路由巢狀
使用children屬性定義子路由,children值是一個數組,可以定義多個子路由
1.子路由定義
{ path: '/', name: 'dashboard', component: () => import('@/components/dashboard'), children:[ { path: '/', name: 'list', component: () => import('@/views/list') }, { path: '/adduser', name:'adduser', component: () => import('@/views/adduser') }]
}