vuexx
/**
* 目标:编程式导航(js跳转页面)
* name 或 path选其一
* 如果需要用name跳转,需要在路由规则中给路由规则对象添加name属性,并且不能重复
* 建议根path保持一致,有name属性的路由,我们也称为命名路由
* 语法:this.$router.push({
* path: '要去的路由路径‘,
* name: '要去的路由名字‘
* })
*
* 目标:编程式导航(js跳转页面)- 跳转传参
* 语法:
* 1. name + params -> $route.params.参数名
*
* 2. path + query -> $route.query.参数名
*
*
*/
export default {
name: 'App',
methods: {
goto(){
this.$router.push({
// path: '/my'
name: 'my'
})
},
goto2(){
// name + params
//
我是: {{ $route.params.uname }}
this.$router.push({
name: 'friend/detail',
params: {
uname: '小传'
}
})
// path + query
//
我是: {{ $route.query.username }}
this.$router.push({
path: '/friend',
query: {
username: '小智'
}
})
}
}
}
/**
* 两个类的区别:
* router-link-exact-active: 精准匹配,就是a的href属性值与url地址完全一样(全等关系)
* router-link-active: 模糊匹配,就是url地址包含a的href属性值即可(以a的href属性值开头)
*/
/**
* 目标:跳转传参
* 方式:
* (1)query:
* 传:/path?参数名=值
* 接:$route.query.参数名
*
* (2) params:
* 传:/path/值
* 需要在路由规则中配置 动态参数的 路由 /path/:参数名
* 接:$route.params.参数名
*
* 注意点:自己不要自己,url地址如果与要去path一样了,不能跳转了,否则会报错。
*/
a {
margin-right: 20px;
}
a.router-link-active {
color: red;
}
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
