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){
    
    }
}