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是模糊匹配。

相关推荐
雲墨款哥几秒前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob02344 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder9 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder10 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep17 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛22 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i31 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟35 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览39 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少41 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos