路由进阶 – Eric小屋

路由的封装抽离

将路由的配置提出来，创建新的配置模块，index.js 中
然后在主配置模块中引入路由配置模块即可

将路由模块抽离出来好处：拆分模块，利于维护

声明式导航

vue-router 提供了一个全局组件 <strong>router-link</strong> (取代 a 标签)

1、能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签，to 无需 #

2、能高亮，默认就会提供高亮类名，可以直接设置高亮样式

声明式导航两个类名

我们发现 router-link 自动给当前导航添加了 两个高亮类名

1、router-link-active 模糊匹配 (用的多)

to="/my" 可以匹配 /my /my/a /my/b ....

2、router-link-exact-active 精确匹配

to="/my" 仅可以匹配 /my

____________________________________________________________

我们也可以自定义两个类名：

在路由模块配置：

const router = new VueRouter({
  routes: [...],
  linkActiveClass: "类名1",
  linkExactActiveClass: "类名2"
})

声明式导航跳转传参

在跳转路由时, 可以进行传值

1. 查询参数传参
① 语法格式:
to="/path?参数名=值"
② 对应页面组件接收传递过来的值:
$route.query.参数名

2. 动态路由传参
① 配置动态路由

const router = new VueRouter({
  routes: [
    ...,
    {
      path: '/search/:words',
      component: Search
    }
  ]
})

② 配置导航链接
to="/path/参数值"
③ 对应页面组件接收传递过来的值
$route.params.参数名

两种传参方式的区别:

1. 查询参数传参 (比较适合传多个参数)
① 跳转：to="/path?参数名=值&参数名2=值"
② 获取：$route.query.参数名

2. 动态路由传参 (优雅简洁，传单个参数比较方便)
① 配置动态路由：path: "/path/参数名"
② 跳转：to="/path/参数值"
③ 获取：$route.params.参数名

动态路由参数可选符

问题：配了路由 path: "/search/:words" 为什么按下面步骤操作，会未匹配到组件，显示空白？

原因： /search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符 "?"

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/search/:words?', component: Search }
  ]
})

Vue路由 - 重定向

问题：网页打开， url 默认是 / 路径，未匹配到组件时，会出现空白

说明：重定向 → 匹配path后, 强制跳转path路径 更改默认首页

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home'},
    { path: '/home', component: Home },
    { path: '/search/:words', component: Search }
  ]
})

Vue路由 - 404

作用：当路径找不到匹配时，给个提示页面

位置：配在路由最后

语法：path: "*" (任意路径) – 前面不匹配就命中最后这个

import NotFind from '@/views/NotFind'

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/search/:words?', component: Search },
    { path: '*', component: NotFind }
  ]
})

Vue路由 - 模式设置

hash路由(默认) 例如: http://localhost:8080/#/home

history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持)

const router = new VueRouter({
  routes: []
  mode: "history"
})

编程式导航 - 基本跳转

编程式导航：用JS代码来进行跳转

两种语法:

① path 路径跳转

this.$router.push('路由路径')
this.$router.push({
  path: '路由路径'
})

② name 命名路由跳转

this.$router.push({
name: '路由名'
})

{ name: '路由名', path: '/path/xxx', component: XXX },

编程式导航 - 路由传参

两种传参方式：查询参数 + 动态路由传参

两种跳转方式，对于两种传参方式都支持：

① path 路径跳转传参

1、path路径传参 query传参

this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
this.$router.push({
  path: '/路径',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

2、path路径传参 动态路由传参

this.$router.push('/路径/参数值')
this.$router.push({
  path: '/路径/参数值'
})

② name 命名路由跳转传参

1、name 命名路由跳转传参 query传参

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

2、name 命名路由跳转传参 动态路由传参

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