Vue-路由/声明式导航,编程式导航(传参)

一.声明式导航

1.声明式导航 - 导航链接

vue-router 提供了一个全局组件 router-link (取代 a 标签)
① 能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签 ，to 无需 #
② 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

//必须传入to属性, 指定路由路径值

2.声明式导航 - 两个类名

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

① router-link-active 模糊匹配 (用的多)
to=“/my” 可以匹配 /my /my/a /my/b …
② router-link-exact-active 精确匹配
to=“/my” 仅可以匹配 /my

声明式导航 - 两个类名(定制)

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

3.声明式导航 - 跳转传参

1. 查询参数传参

① 语法格式如下
to=“/path?参数名=值”
② 对应页面组件接收传递过来的值
$route.query.参数名

2.动态路由传参

① 配置动态路由

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

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

动态路由参数可选符?

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

二.Vue路由 - 重定向

问题：网页打开， url 默认是 / 路径，未匹配到组件时，会出现空白
说明：重定向 → 匹配path后, 强制跳转path路径

语法： { path: 匹配路径, redirect: 重定向到的路径 },

三.Vue路由 - 404

作用：当路径找不到匹配时，给个提示页面
位置：配在路由最后
语法：path: “*” (任意路径) – 前面不匹配就命中最后这个

四.Vue路由 - 模式设置

问题: 路由的路径看起来不自然, 有#，能否切成真正路径形式?
hash路由(默认) 例如: http://localhost:8080/#/home
history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持)

const router = new VueRouter({
routes: [ …],

mode:‘history’

})

五.编程式导航

1.编程式导航 - 基本跳转

① path 路径跳转

this.$router.push(‘路由路径’)

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

② name 命名路由跳转

(适合 path 路径长的场景)

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

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

2.编程式导航 - 路由传参

① path 路径 (query传参)

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

①path 路径(动态路由传参)

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

② name 命名 (query传参)

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

② name 命名(动态路由传参)

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

六.组件缓存 keep-alive

<keep-alive :include/exclude/max="['组件名']>
      <router-view></router-view>
</keep-alive>

keep-alive的三个属性

① include ： 组件名数组，只有匹配的组件会被缓存

② exclude ： 组件名数组，任何匹配的组件都不会被缓存

③ max ： 最多可以缓存多少组件实例

keep-alive会触发两个新的生命周期函数(钩子函数)

activated 当组件被激活（使用）的时候触发 → 进入这个页面的时候触发

deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发
注意:

组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了