【Vue2+3入门到实战】（16）VUEVue路由的重定向、404、编程式导航、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/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命名路由跳转

8.总结

编程式导航有几种跳转方式？

五、编程式导航-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({
  path: '/路径/参数值'
})

接受参数的方式依然是：$route.params.参数值

**注意：**path不能配合params使用

六、编程式导航-name命名路由传参

1.name 命名路由跳转传参 (query传参)

this.$router.push({
  name: '路由名字',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

2.name 命名路由跳转传参 (动态路由传参)

this.$router.push({
  name: '路由名字',
  params: {
    参数名: '参数值',
  }
})

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: {
      参数名: '参数值',
    }
  })
  

七、面经基础版-案例效果分析

1.面经效果演示

2.功能分析

• 通过演示效果发现，主要的功能页面有两个，一个是列表页，一个是详情页，并且在列表页点击时可以跳转到详情页
• 底部导航可以来回切换，并且切换时，只有上面的主题内容在动态渲染

3.实现思路分析：配置路由+功能实现

1.配置路由

• 首页和面经详情页，两个一级路由
• 首页内嵌套4个可切换的页面（嵌套二级路由）

2.实现功能

• 首页请求渲染
• 跳转传参 到 详情页，详情页动态渲染
• 组件缓存，性能优化