2021-10-08

vue-router模块包和Vue.js深度集成
自带高亮
提供两个内置全局组件 router-view /router-view
router-link /router-link

• VueRouter在全局注册的组件, 本质就是a标签,使用时, 必须传入to属性, 指定路由路径值

---

声明式导航-传参
语法1:
to=’/路由路径?参数名= 值’
接收方 {{ $route.query.参数名 }}
语法2:
动态路由
路由规则对象,path: ‘/路由路径/:参数名’
to:/路由路径/值 -> 接收方 {{ $route.params.参数名 }}

---

重定向 redirect

匹配path后, 强制切换到目标path上
网页打开url默认hash值是/路径
redirect是设置要重定向到哪个路由路径

const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新修改的路由路径
  }
]

---

404页面
放到路由最后, path匹配*(任意路径) – 前面不匹配就命中最后这个, 显示对应组件页面

创建一个组件页面

<template>
  <img src="../assets/404.png" alt="">
</template>

main.js 修改路由配置

import NotFound from '@/views/NotFound'

const routes = [
  // ...省略了其他配置
  // 404在最后(规则是从前往后逐个比较path)
  {
    path: "*",
    component: NotFound
  }
]
//总结: 如果路由未命中任何规则, 给出一个兜底的404页面

---

Vue路由-模式设置

修改路由在地址栏的模式

• hash路由例如: http://localhost:8080/#/home
• history路由例如: http://localhost:8080/home (上线需要服务器端支持, 否则找的是文件夹)

在router/index.js

const router = new VueRouter({
  routes,
  mode: "history" // 打包上线后需要后台支持, 模式是hash
})
//在实例化路由对象时, 传入mode选项和值修改

---

Vue路由-编程式导航-跳转

使用JS代码来进行跳转

语法:

this.$router.push({
    path: "路由路径", // 都去 router/index.js定义
    name: "路由名"
})

方法1
使用path跳转:
path:’/路由路径’ //在规则数组里定义

创建按钮绑定点击事件

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

方法2
使用name跳转

在规则数组里对应规则内添加 name: ‘路由名字’

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

---

编程式导航-传参

语法 query / params 任选 一个

this.$router.push({
    path: "路由路径"
    name: "路由名",
    query: {
    	"参数名": 值
    }
    params: {
		"参数名": 值
    }
})

// 对应路由接收   $route.params.参数名   取值
// 对应路由接收   $route.query.参数名    取值

query方法

params方法不可以和path一起用

隔壁页面

---

Vue路由-路由嵌套

配置二级路由

import引入对应路由页面
嵌套路由在上级路由的children数组里编写路由信息对象
二级路由path一般不写根路径/

const routes = [
  // ...省略其他
  {
    path: "/find",
    name: "Find",
    component: Find,
    children: [
      {
        path: "recommend",
        component: Recommend
      },
      {
        path: "ranking",
        component: Ranking
      },
      {
        path: "songlist",
        component: SongList
      }
    ]
  }
  // ...省略其他
]

一级页面中设置router-view显示二级路由页面

---

Vue路由-声明式导航-类名区别

router-link自带的2个类名的区别是什么

• router-link-exact-active (精确匹配) url中hash值路径, 与href属性值完全相同, 设置此类名
• router-link-active (模糊匹配) url中hash值, 包含href属性值这个路径
  

---

Vue路由-全局前置守卫

// 生成路由对象
const router = new VueRouter({
  routes
})

在生成路由对象的后面添加守卫

const isLogin = true // 登录状态(未登录)
router.beforeEach((to, from, next) => {

  // to 要跳转到的下一个页面
  // from 当前要离开的此页面
  // next 继续函数

  if (to.path === "/my" && isLogin === false) {
    alert("请登录")
    next(false) // 阻止路由跳转
  } else {
    next() // 正常放行
  }
})

---

Vue路由-组件缓存

学习keep-alive, 实现组件缓存效果
keep-alive是vue内置的一个组件