vue-router路由导航基础--router-link标签

router-link的几种方式进行说明

to属性

配合的方式有两种,第一种:to="{path: '/home'}",第二种:to="{name: 'home'}

传递参数也有两种方式,params和query,如:to="{ name: 'home', params: { name: '张三' } }、:to="{ path: '/test', query: { name: '张三' } }"

注意事项:params只能配合name属性使用,否则在组件内不能获取到对应的参数,并且页面属性对应的参数数据会消失。query配合两种都可以(name和path),刷新不会消失--因为这个会存放在路由中,以路由参数显示在地址栏中。

<router-link :to="{ name: 'home', params: { name: '张三' } }">
 name 搭配 params
</router-link>
<router-link :to="{ path: '/test', query: { name: '张三' } }">
path 搭配 query
</router-link>
<router-link :to="{ name: 'test', query: { name: '张三' } }">
name 搭配 query
</router-link>

也可以理解为name随便什么方式传参(params和query皆可,params刷新后依旧没有)或者query随便什么跳转方式(name或者path)。

其他属性

replace --- 不会存留历史记录(跳转来之前的一个记录)

tag --- 指定渲染的真实标签(router-link并不是一个真实的标签),默认是a标签

active-class --- 指定对应路由导航标签激活的类名,默认为router-link-exact-active router-link-active

exact --- 严格匹配,避免/a匹配到/的路劲,如果不给path:'/'的标签添加该属性,则切换后也会有一个激活的类名。

append --- 相对路劲添加

总的来说,写一点也总算是巩固学习,总比什么都不做为好。最近提了辞呈,希望江湖有我的容身之地,啊哈哈哈哈


关于作者

xlynn
获得点赞
文章被阅读