一、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/NotFind'
const router = new VueRouter({
routes: [
...
{ path: '*', component: NotFind } //最后一个
]
})
4.代码示例
NotFound.vue
<template>
<div>
<h1>404 Not Found</h1>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
router/index.js
...
import NotFound from '@/views/NotFound'
...
// 创建了一个路由对象
const router = new VueRouter({
routes: [
...
{ path: '*', component: NotFound }
]
})
export default router
三、Vue路由-模式设置
1.问题
路由的路径看起来不自然, 有#，能否切成真正路径形式?
- hash路由(默认) 例如: http://localhost:8080/#/home
- history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题)
2.语法
const router = new VueRouter({
mode:'histroy', //默认是hash
routes:[]
})
四、编程式导航-两种路由跳转方式
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: { 参数名: '参数值', } })
