vue知識點彙總
vue-router(路由)
1.懶加載方式:const routers = [{
path:’/index’,
component:(resolve) => require([’’],resolve)
}]
2.html5的history路由模式
const routerConfig = {
mode:‘history’,
routes:routers
}html
3.路由path加參數
const routers = [{
path:’/user/:id’,
component:(resolve) => require([’’],resolve)
}]
訪問路徑:localhost:8080/user/1234
拿到id:this.$route.params.idvue
4.路由跳轉
1.點擊
tag:渲染的標籤 replace:不會留下history記錄,返回鍵返回不到當前頁面html5
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 導航鉤子函數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
}
}]
}markdown