织梦网站后台进不去,安徽建网站,西宁市解封最新消息今天,太原百度快速优化排名一、Vue路由-重定向
1.问题
网页打开时#xff0c; url 默认是 / 路径#xff0c;如果未匹配到组件时#xff0c;会出现空白
2.解决方案
重定向 → 匹配 / 后, 强制跳转 /home 路径
3.语法
{ path: 匹配路径, redirect: 重定向到的路径 },
比如#xff1a;
{ path:/ …一、Vue路由-重定向
1.问题
网页打开时 url 默认是 / 路径如果未匹配到组件时会出现空白
2.解决方案
重定向 → 匹配 / 后, 强制跳转 /home 路径
3.语法
{ path: 匹配路径, redirect: 重定向到的路径 },
比如
{ path:/ ,redirect:/home }4.代码演示
const router new VueRouter({routes: [{ path: /, redirect: /home},...]
})二、Vue路由-404
1.作用
当路径找不到匹配时给个提示页面
2.位置
404的路由虽然配置在任何一个位置都可以但一般都配置在其他路由规则的最后面
3.语法
path: “*” (任意路径) – 前面不匹配就命中最后这个
import NotFind from /views/NotFindconst router new VueRouter({routes: [...{ path: *, component: NotFind } //最后一个]
})4.代码示例
NotFound.vue
templatedivh1404 Not Found/h1/div
/templatescript
export default {}
/scriptstyle/stylerouter/index.js
...
import NotFound from /views/NotFound
...// 创建了一个路由对象
const router new VueRouter({routes: [...{ path: *, component: NotFound }]
})export default router三、Vue路由-模式设置
1.问题
路由的路径看起来不自然, 有#能否切成真正路径形式?
hash路由(默认) 例如: http://localhost:8080/#/homehistory路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持开发环境webpack给规避掉了history模式的问题)
2.语法
const router new VueRouter({mode:histroy, //默认是hashroutes:[]
})四、编程式导航-两种路由跳转方式
1.问题
点击按钮跳转如何实现 2.方案
编程式导航用JS代码来进行跳转
3.语法
两种语法
path 路径跳转 简易方便name 命名路由跳转 (适合 path 路径长的场景)
4.path路径跳转语法
特点简易方便
//简单写法
this.$router.push(路由路径)//完整写法
this.$router.push({path: 路由路径
})5.代码演示 path跳转方式
6.name命名路由跳转
特点适合 path 路径长的场景
语法 路由规则必须配置name配置项 { name: 路由名, path: /path/xxx, component: XXX },通过name来进行跳转 this.$router.push({name: 路由名
})7.代码演示通过name命名路由跳转
五、编程式导航-path路径跳转传参
1.问题
点击搜索按钮跳转需要把文本框中输入的内容传到下一个页面如何实现
2.两种传参方式
1.查询参数
2.动态路由传参
3.传参
两种跳转方式对于两种传参方式都支持
① path 路径跳转传参
② name 命名路由跳转传参
4.path路径跳转传参query传参
//简单写法
this.$router.push(/路径?参数名1参数值1参数2参数值2)
//完整写法
this.$router.push({path: /路径,query: {参数名1: 参数值1,参数名2: 参数值2}
})接受参数的方式依然是$route.query.参数名
5.path路径跳转传参动态路由传参
//简单写法
this.$router.push(/路径/参数值)
如this.$router.push(/search/${this.searchword})
//完整写法
this.$router.push({path: /路径/参数值
})index.js
routes: [{ path: /search/:word?, component: Search }]接受参数的方式依然是$route.params.参数值 如 $route.params.searchword
六、编程式导航-name命名路由传参
1.name 命名路由跳转传参 (query传参)
this.$router.push({name: 路由名字,query: {参数名1: 参数值1,参数名2: 参数值2}
})2.name 命名路由跳转传参 (动态路由传参)
this.$router.push({name: 路由名字,params: {参数名: 参数值,}
})注意 path不能配合params使用所以在index.js中路由的配置也需要有name
3.总结
编程式导航如何跳转传参
1.path路径跳转 query传参 this.$router.push(/路径?参数名1参数值1参数2参数值2)
this.$router.push({path: /路径,query: {参数名1: 参数值1,参数名2: 参数值2}
})动态路由传参 this.$router.push(/路径/参数值)
this.$router.push({path: /路径/参数值
})2.name命名路由跳转 query传参 this.$router.push({name: 路由名字,query: {参数名1: 参数值1,参数名2: 参数值2}
})动态路由传参 (需要配动态路由) this.$router.push({name: 路由名字,params: {参数名: 参数值,}
})
