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
}
}]
}
