router知识

qq_67263268

已于 2022-08-05 17:08:46 修改

阅读量353

点赞数

文章标签： servlet java jvm

于 2022-08-05 17:08:33 首次发布

本文链接：https://blog.csdn.net/qq_67263268/article/details/126181342

版权

本文详细介绍了Vue.js中的路由管理组件<router-link>和<router-view>的使用，包括普通路由配置、带参数的路由配置及404路由。同时，讲解了编程式路由跳转的方法如replace、push、go和back。此外，还涉及路由守卫、路由元信息以及查询参数的传递和获取。通过实例展示了如何在Vue项目中实现灵活的路由管理。

摘要由CSDN通过智能技术生成

一.组件

1.<router-link>切换路由

（to=“/user” 切换路由的地址）（<router-link :to="{'name':'about'}">关于</router-link>
<router-link :to="{path:'/product/def',query:{age:18},hash:'best'}">产品</router-link>）

2.<router-view />
存放路由

二.路由配置
/router/index

1.普通：{
path:"/user",
name:"user",
component:()=>import(xxx)
}

2.传参：{
path:"/product/:id",
name:"product",
component:xxx
}

3.404：要配置在最后面 { path:"*"}

三.编程式路由跳转 $router

替换路由(不留当前页面历史记录)
1.replace("/about")
2.切换路由 push("/about")
3.后退 go(-1)/back()
4.前进 forward()/go(1)

四.路由守卫