VueRouter的query和params传参的使用和区别

1. 声明式导航下的query和params传参

1.1 声明式导航

又名声明式导航,是 vue-router 提供的专门拿来替代原生标签的。

原生的标签,href值必须加 #/... 才能和路由匹配,非常不友好,使用 就不用加#了,就像这样:

发现音乐
我的音乐
朋友

提供了声明式导航高亮的功能,这是因为 会自动给当前导航添加两个类名:

①  router-link-active: 激活的导航链接 \ 模糊匹配
例如 , 可以匹配到  /my,/my/a,/my/b ...等    

②  router-link-exact-active: 激活的导航链接 \ 精确匹配
例如, 只能匹配 /my

要是觉着 router-link-active \ router-link-exact-active 两个类名太长不好记,也可以在配置路由规则的地方重命名:

# 笔者从未改过
const router = new VueRouter({
	linkActiveClass: 'active',
	linkExactActiveClass: 'exactActive'
})

1.2 query传参

在跳转路由时,可以给路由匹配的组件传值:

# 语法: to="/路径?k=v&k=v"
...

 对应页面组件接收传递过来的值:


                    
                    

你可能感兴趣的:(vue.js,javascript,前端)