vue路由小案例

vue路由小案例

• 案例需求
• 案例实现
• 小结

案例需求

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

案例实现

（一）路由配置

1. 创建一级路由，用来显示导航栏以及详细信息
   创建数组，存放对象
   path：路由路径
   component：组件

const rou=[
    {path:'/'  ,component:HeA1,
    {path:'/det/:id?',component:HeA2}
]

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

    {path:'/',redirect:'/w1'  ,component:HeA1 ,children:[{path:"/w1",component:MoT1},{path:'/s1',component:MoT2}]},

3.添加路由

先导入createRouter、createWebHistory

再通过createRouter创建

const r=createRouter({
    history:createWebHistory(),
    routes:rou
})

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

export default r

在main.js中，使用use（）添加路由r

app.use(rou)

（二）创建页面

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

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

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

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

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

a.router-link-exact-active{
    color: brown;
}

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

    {path:'/',redirect:'/w1'  ,component:HeA1 ,children:[{path:"/w1",component:MoT1},{path:'/s1',component:MoT2}]},

（三）路径传参

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

 @click="$router.push(`/det/${item.id}`)"

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

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

小结

（一）路由传参的方式及获取

1. 查询参数：直接在路径后添加?key=123

$router.push('/u1?key=12')

获取：$route.query.key

2. 动态传参：在路径后添加'/参数'
   获取：$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是模糊匹配。