vue路由小案例

vue路由小案例

案例需求

  1. 创建二级路由,掌握嵌套路由
  2. 点击内容,根据不同id实现页面的跳转,掌握传参方式
  3. 利用routerlink标签封装的类,实现高亮
  4. 实现重定向,自动跳转到二级页面

案例实现

(一)路由配置

  1. 创建一级路由,用来显示导航栏以及详细信息
    创建数组,存放对象
    path:路由路径
    component:组件
javascript 复制代码
const rou=[
    {path:'/'  ,component:HeA1,
    {path:'/det/:id?',component:HeA2}
]

2.创建二级路由,在一级路由后添加children,同样指明path以及component

html 复制代码
    {path:'/',redirect:'/w1'  ,component:HeA1 ,children:[{path:"/w1",component:MoT1},{path:'/s1',component:MoT2}]},

3.添加路由

先导入createRouter、createWebHistory

再通过createRouter创建

javascript 复制代码
const r=createRouter({
    history:createWebHistory(),
    routes:rou
})

如果配置在main.js不需要导出,其它地方需要导出

javascript 复制代码
export default r

在main.js中,使用use()添加路由r

javascript 复制代码
app.use(rou)

(二)创建页面

HeAl:通过RouterLink标签创建四个导航,RouteView标签,用来展示对应路径的组件

MoT1:模拟数据,通过v-for遍历数组,将数据在页面中展现

1.在app.vue页面中,创建RouteView标签,展示对应路径的组件

根据刚才的路由配置,此时显示的是组件HeA1的内容

并通过router-link-exact-active类设置字体颜色,实现点击变色

css 复制代码
a.router-link-exact-active{
    color: brown;
}

2.通过重定向redirect,使得页面自动跳转到首页

javascript 复制代码
    {path:'/',redirect:'/w1'  ,component:HeA1 ,children:[{path:"/w1",component:MoT1},{path:'/s1',component:MoT2}]},

(三)路径传参

1.给每个商品添加点击事件@click="",通过$router.push(``)来实现参数的传递

javascript 复制代码
 @click="$router.push(`/det/${item.id}`)"

2.该路径传给的是HeA2组件,由于创建的动态路由,需要通过$route.params.id获取参数。创建computed计算属性,遍历存储的数据,若有该数据返回true,反之false。并通过v-if="计算属性",来展示页面。

3.添加返回标签,通过给botton添加$router.back(),使其能够返回页面

小结

(一)路由传参的方式及获取

  1. 查询参数:直接在路径后添加?key=123
javascript 复制代码
$router.push('/u1?key=12')

获取:$route.query.key

  1. 动态传参:在路径后添加'/参数'
    获取:$route.params.id

区别:动态获取参数的id是在配置路由时设置的(/u1/:id),参数查询的key是自己传参时命名的参数名

(二)route与router的区别

route主要用来接受参数,router用来路径的转变(back,push)

(三)RouterLink标签

该标签的本质是a标签,里面的router-link-exact-active以及router-link-active类可以设置该标签激活时的样式。其中router-link-active是模糊匹配。

相关推荐
华子w9089258597 分钟前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
天天扭码27 分钟前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw528 分钟前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !31 分钟前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
Burt33 分钟前
tsdown vs tsup, 豆包回答一坨屎,还是google AI厉害
前端
群联云防护小杜1 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1232 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜052 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界2 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku3 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery