vue学习day12-声明式导航续、路由重定向、Vue路由-404、Vue路由-模式设置、编程式导航

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准备开启！！！