vue 路由4.x介绍 vue-router 4.x他是兼容的vue3版本的路由，它里面的配置与vue-router 3

介绍

vue-router 4.x他是兼容的vue3版本的路由，它里面的配置与vue-router 3.x的区别与配置还是有一定的区别
本篇笔记会围绕着vue-router 4.x 进行介绍，会对比vue-router 3.x 做对比，他们的区别之处在哪里

安装

通过使用npm install vue-router@4 安装路由4版本
项目中创建路由，并引入在入口文件中，进行注册

1. router.js 配置
import { createRouter, createWebHashHistory } from 'vue-router'

{
	createWebHistory // history模式
  createWebHashHistory // hash模式
}

routes = [
  {
  	path: ''，
    name: '',
    component: () => import(),
    props: true
  }
]


const router = createRouter({  // 创建路由实例
	history： createWebHashHistory, // 设置路由额模式，此模式是hash模式 
	routes // 路由规则的配置
})


export default router

2. main.js 入口文件中进行引入注册
import router from '/router'

const app = createApp(App)
app.use(router)

入门

动态路由参数

动态路由的设置:进行设置动态路由参数，冒号后面拼接的就是动态路由参数，例如：商品跳入详情页，需要传递商品的id，可以通过动态路由的方式，将商品id传递给组件

const routes = [
  {
  	path: '/user/:id',
    component: () => import()
  }
]

如何获取通过动态路由传递的参数呢？，可以通过$route路由信息对象，获取参数

this.$route.params.id // 获取动态路由参数

匹配不到的路由

所谓的匹配不到的路由就是，当用户在浏览器的地址栏中输入了，一个不存在的路径地址，他将会重新定向到 404 页面，与vue-router 3.x中的区别就是不在使用 * 去匹配所有的，如下是vue-router 4.x的匹配规则

const routes = [
	{
    path: '/:pathMatch(.*)*',
    name: 'not-found',
    component: () => import()
  }
]

侦听路由变化

举个例子，当使用缓存组件的时候，对商品详情页的缓存，提升了网络请求的次数，商品详情避免不了用户点击同一个商品，不使用缓存组件会导致，进入一次就会重新发一次请求，如果连续进入同一个商品的详情，就会多次发送相同的请求，比较浪费，所以会使用缓存组件对组件进行缓存，但是问题来了，当进入商品详情的时候，会发现进入某一商品详情的时候，会展示第一次访问的商品详情，这是因为第一次进入，keep-alive会将组件进行缓存，但是组件被缓存，是不会重新发送请求的，这时候，我们可以使用watch去侦听路由的变化，当路由的信息发生了变化，我就要组件重新发送一次请求

created() {
	this.$watch(
  	() => this.$route.params, // 侦听$route的参数变化
    () => { // 参数改变，要做出一些相应
    	
    }
  )
}

嵌套路由

嵌套路由的写法还是与vue-router 3.x 相差无几

const routes = [
  {
  	path: '/user',
    component: () => import(),
    children: [
    	{
  			path: 'userList',
    		component: () => import()
  		}
    ]
  }
]

编程式导航

声明式导航，通过router-view进行路由的跳转，该标签会被渲染成a标签，通过标签的to属性，去访问路由组件
编程式导航，使用编程式导航，进行路由跳转，并且携带参数

this.$router.push('路径地址') 1. 普通的跳转

this.$router.push({ name: '路径地址' }) 2. 通过路由name值，进行跳转

this.$router.push({ name: '路径地址', params: { id: 1 } }) 3. 跳转路由并携带params类型的参数

this.$router.push({ name: '路径地址', query: { id: 1 } }) 4. 跳转路由携带query类型的参数

路由跳转历史记录回退操作

this.$router.go()  // 路由回退操作 参数 1. 代表的前进 -1. 代表的后退操作

路由重定向

当一个项目打开，首先用户看到的是首页，在配置的路由信息对象的时候，需要给/路径的进行重新定向到首页，这样，用户打开页面，第一眼看到的是首页

const routes = [
	path: '/',
  redirect: ''
]

进阶路由

路由元信息

路由元信息，通过在配置路由信息对象的时候，可以给组件设置路由元信息meta属性，可以给某一条路由设置谁可以访问，比如说，当前页面就需要验证用户是否登录了，如果没有登录，就要重定向到登录页面

{
  path: '',
  name: '',
  component: () => import(''),
  meta: { requireAuth: true }
},

在使用缓存组件的时候，也可以通过设置meta属性，当匹配到了的组件们就要被缓存，当路由跳转的时候路由匹配到了keepAlice 就会将当前组件缓存下来

<template>
  <div id="app">
    
    <keep-alive>
      <!-- 如果keepAlice 为true，组件就会缓存-->
      <router-view v-if="$route.meta.keepAlice" />
    </keep-alive>
    
    <!--没有给路由设置meta属性的，路由走回走当前的router-view-->
    <router-view v-if="!$route.meta.keepAlice"></router-view>
    
  </div>
</template>

{ 
    path: '',
    component: () => import(''),
    name: 'details',
    props: true,
    meta: {
      keepAlice: true
 		}
}

导航守卫

在这里，我只介绍全局路由守卫，全局导航守卫使用的是beforeEach注册一个全局守卫
他的用处很多，比如说通过全局守卫去拦截登录，如果用户未登录，是无法查看此页面，只能登录后才能进行查看

// 导航守卫
router.beforeEach(to => {
  // 对无需登录的页面进行放行
  if (!to.meta.requireAuth) {
    return true
  }

  // 校验登录状态
  if (!store.state.user.token || !window.localStorage.getItem('USER_TOKEN')) {
    // 跳转登录页，同时记录当前位置
    return {
      name: 'login',
      query: {
        redirect: to.fullPath
      }
    }
  }
})

to参数代表的是，去到哪里的路由
from参数代表的是，从哪一个路由跳过来的

vue 路由4.x

介绍

安装

入门