34、声明式导航续
(4)跳转传参
1)跳转传参
①语法:
传递:to=“/path?参数名=值”
接收:如果在模版里,通过$route.query.参数名获取,如果在js代码里,通过this. $route.query.参数名获取
②示例
传参:
链接路径
传参
获取:
2)动态传参
①配置动态路由
②配置导航链接
to=”path/参数值”
③对应页面组件接收传递过来的值
$route.params.参数名
④示例:
3)跳转传参的两种方式的区别
①查询参数传参(多个参数)
跳转:to=”/path?参数名1=值$参数名2=值”
获取:$route.query.参数名
②动态路由传参(单个参数)
配置动态路由:path:”/path/参数名”
跳转:to=”/path/参数值”
获取:$route.params.参数名
4)动态路由参数可选符
配置动态路由之后,当不传参数时,会出现整个页面都为空的情况
加上可选符
35、路由重定向
(1)原因(为什么要进行路由重定向)
网页打开,url默认路径是/的,没有匹配到路径,会出现空白
(2)重定向语法
{path:'匹配路径',redirect:'重定向到的路径'}
匹配到path后,强制跳转redirect设置的路径
(3)示例
36、Vue路由-404
(1)作用:当路径找不到匹配时,给个提示页面
(2)位置:配置在路由最后
(3)语法:path:“*”(任意路径)-前面不匹配就命中最后这个
(4)示例
37、Vue路由-模式设置
路径带“#”的怎么变成自然的,不带“#”的
(1)模式类型:
1)hash路由(默认)的
比如:
2)history路由(常用),使用history需要通知后台匹配一定的规则(上线需要服务器端支持)
比如:
38、编程式导航
(1)概念:用js代码来进行跳转
(比如:点击按钮跳转)
(2)分类
1)path路径跳转
语法:
①简单
this.$router.push('路由路径')
②完整
this.$router.push({
path: '路由路径'
})
③示例
简单:
完整:
2)name命名路由跳转(适合path路径长的场景)
语法:
①命名:
(给需要的地方,添加一个name即可)
{ name: '路由名', path: '路由路径', component: 组件名},
②添加
给需要的方法中添加
this.$router.push({
name:'search'
})
③示例
效果:
(3)路由传参
两种传参方式:查询参数+动态路由传参
两种跳转方式,对于两种传参方式都支持
1)path路径跳转传参
方法一(简单):
①提供一个双向绑定的值
②传参
③获取参数
④效果:
方法二(完整写法传参):
①提供一个双向绑定的值
②传参
③获取参数
④效果:
方法三(动态路由传参):
①设置动态路由
②传参
③获取
④效果:
2)name命名路由跳转传参
方法一(query):
①命名
②传参
③获取
④效果:
方法二(动态路由传参):
①设置动态路由
②传参
③获取
④效果:
vue2的基本学习正式结束,vuex准备开启!!!