vue之vue-router

vue知識點彙總
vue-router(路由)
1.懶加載方式：const routers = [{
path:’/index’,
component:(resolve) => require([’’],resolve)
}]
2.html5的history路由模式
const routerConfig = {
mode:‘history’,
routes:routers
}

3.路由path加參數
const routers = [{
path:’/user/:id’,
component:(resolve) => require([’’],resolve)
}]
訪問路徑：localhost:8080/user/1234
拿到id：this.$route.params.id

4.路由跳轉
1.點擊
tag:渲染的標籤 replace：不會留下history記錄，返回鍵返回不到當前頁面

2.
   命名的路由
   this.$router.push({name:'user',params:{paicheNo: obj.paicheNo}})  
         取數據：this.$route.params.paicheNo

   帶查詢參數的路由，變成：regist/paicheNo=obj.paicheNo
   this.$router.push({path:'regist',query:{paicheNo: obj.paicheNo}}) 
         取數據：this.$route.query.paicheNo

   this.$router.replace('/user/123') 不會像history裏添加數據，點擊返回會跳轉到上上頁

   this.$router.go(-1)  返回上一頁   this.$router.go(2)  前進兩頁

5.vue-router 導航鉤子函數

beforeEach和afterEach

   router.beforeEach((to,from,next) => {

   })
   to:即將要進入目標的路由對象
   from:當前導航即將要離開的路由對象
   next:調用該方法進入下一個鉤子

6.嵌套路由 （選項卡）
{
path: ‘/’,
// component: Home,
component: resolve => require([’@/components/Home.vue’], resolve),
meta: {
requiresAuth: true
},
children: [{
path: ‘/’,
name: ‘index’,
// component: index,
component: resolve => require([’@/components/index.vue’], resolve),
meta: {
requiresAuth: true
}
}]
}