vue3和vue2路由的变化 (轻松拿捏vue3)

1、路由 router 创建 区别

①vue3写法:----------------------------------

import { createRouter, createWebHistory } from 'vue-router'
const routerHistory = createWebHistory()
 const router = createRouter({
    history: routerHistory,
    routes: []
})
export default router

②vue2写法:-------------------------------------

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
  	routes: []
});
export default router;

2、动态添加路由 区别

①vue3写法:----------------------------------

//添加路由
router.addRouter({path:'/one',name:'one',component:()=> import('...page1.vue')}) 
//添加子路由
router.addRouter('one',{path:'/son1',name:'son1',component:()=> import('...son1.vue')})

②vue2写法:-----------------------------------

let routeA=[{ path: '/pageA', name: 'pageA',  component:()=> import('...pageA.vue')}]
router.addRoutes(routeA);

3、切换路由(router.push) 区别

①vue3写法:-----------------------------------

import { useRouter }  from  'vue-router'
setup(){
    const  router = useRouter()
    router.push('/');
    router.push({ path:'/aaa', params:{ username: 'posva'} });
}

②vue2写法:-----------------------------------

this.$router.push({path: '/bbb', query: {username: "abc"}});

4、路由守卫 区别

①vue3—>vue2未改变

router.beforeEach((to, from, next)=>{         })  beforeResolve 路由解析前  afterEach 路由跳转后执行
/* 逐个 (生命周期钩子) created一样  */
beforeRouteEnter((to, from, next)=>{         }) beforeRouteUpdate   beforeRouteLeave // vue3在setup函数外使用

②vue3新增

onBeforeRouteUpdate ，onBeforeRouteLeave
onBeforeRouteLeave((to, from, next)=>{
    const bool = window.confirm('你确定要离开当前页面吗？');
  	 if(!bool) {  return  false }
})

4、监听路由变化 区别

①vue3写法:-----------------------------------

import { useRoute }  from  'vue-router'
setup(){
    const route = useRoute();
    watch(route.query,(query)=>{ console.log(query); })
}

②vue2写法:-----------------------------------

watch:{
      '$route.path':function(newVal,oldVal){}
}