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;
代码:组件守卫