Vue-编程式路由导航-路由守卫

1.

 2.代码实现：

methods:{
    pushshow(m){
    //  找路由器发送数据
      this.$router.push({
        query:{
          id:m.id,
          title:m.title,
        }
      })
    },
    replaceshow(m){
      this.$router.replace({
        query:{
          id:m.id,
          title:m.title,
        }
      })
    }
  }

前进与后退：

 代码：路由守卫

import { createRouter,createWebHistory } from "vue-router";
import Home from "@/pages/Home";
import About from "@/pages/About";
import News from "@/pages/news";
import Message from "@/pages/message";
import Detail from "@/pages/Detail";
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/Home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News,
                    meta:{title:'主页'},
                    //独享路由守卫，只对一个路由进行守卫
                    beforeEnter:(to, from, next)=>{
                        next()
                    }
                },
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            path:'detail',
                            component:Detail,
                            //都会以props的对象属性detail接收
                            // props:{}
                            //    第二种写法：值为布尔值，诺为真就把该路由组件收到的所有params参数，以props的形式给detail
                            // props:true
                        //    第三种：
                            props($route){
                                return {id:$route.query.id,title:$route.query.title}
                            }
                        }

                    ]
                },
            ]
        },
        {
            path:'/About',
            component:About,
        },
    ]
})


//全局前置路由守卫------每次切换之前调用，还有初始化调用
router.beforeEach((to, from, next)=>{
        //放行
        next()
})

//后置路由
// router.afterEach((to, from, failure) => {
//
//     document.title=to.meta.title || '系统'
//
//
// })

//独享路由守卫，只对一个路由进行守卫



export default router;

代码：组件守卫