vue路由vue-router详解

vue3移动端项目搭建，vue3+vant+vite+axios+pinia+sass完整版代码下载：
https://download.csdn.net/download/randy521520/88820174
vue3移动端项目构建TS，vue3+vant+vite+axios+pinia+sass+typescript完整版代码下载：
https://download.csdn.net/download/randy521520/88820178
vue3 PC端项目构建，vue3+antd+vite+pinia+axios+sass完整版代码下载：
https://download.csdn.net/download/randy521520/88820523
vue3 PC端项目构建TS，vue3+antd+vite+axios+pinia+sass+typescript完整版代码下载：
https://download.csdn.net/download/randy521520/88845681

一、简介

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用程序（SPA）。它允许你在 Vue 应用中实现客户端端的路由功能，通过管理应用的不同视图之间的导航和状态。
以下是 Vue Router 的一些主要特点和功能：
1.声明式路由配置：Vue Router 允许你使用声明式的方式定义应用的路由规则，将路径映射到组件。
2.嵌套路由：你可以定义嵌套路由，使得不同级别的路由可以对应不同的组件，从而构建复杂的页面结构。
3.路由参数：你可以在路由中定义参数，使得不同的路由可以接收不同的参数值，从而实现动态路由。
4.编程式导航：除了声明式的路由跳转方式外，Vue Router 还提供了编程式导航的方式，可以通过 JavaScript 代码来实现页面的跳转。
5.导航守卫：Vue Router 提供了导航守卫，允许你在路由导航过程中进行一些控制和操作，比如在路由跳转前进行拦截、在路由跳转后进行处理等。
6.路由懒加载：Vue Router 支持路由懒加载，可以按需加载路由对应的组件，提高应用的性能表现。
7.路由过渡效果：Vue Router 可以与 Vue 的过渡系统结合使用，实现页面切换时的过渡效果

二、配置路由

1.router.js

import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";

const routes = [
    {
        path: '/',
        redirect: '/home',
    }, {
        path: '/home',
        component: Home
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router

2.main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "@/router.js";

const app = createApp(App);

app.use(router);
app.mount("#app");

三、路由相关Api

1.createRouter(options)：创建 Vue Router 实例的函数。返回Router对象

• end：路由匹配是否以路径的结尾为准。
• history：指定路由使用的历史管理模式，可以是 createWebHistory 或 createWebHashHistory。
• linkActiveClass：激活链接时附加到元素的类名，默认router-link-active。
• linkExactActiveClass：严格匹配激活链接时附加到元素的类名，默认router-link-exact-active
• parseQuery：用于解析查询参数的函数，(search)=>{}
• routes：定义应用程序的路由规则，[{options}]

alias：路由的别名，在导航时可以使用别名代替路径。
beforeEnter：路由独享的守卫，用于在路由进入之前执行逻辑。
children：嵌套路由的配置，用于定义子路由。
component：路由对应的组件，用于渲染该路由。
components：命名视图组件对象，用于定义多个命名视图。
end：路由匹配是否以路径的结尾为准。
meta：路由元信息对象，用于存储路由的元数据。
name：路由的名称，用于在编程式导航中标识路由。
path：路由的路径。
props：确定是否将路由参数作为 props 传递给组件。
redirect：重定向路由配置，用于将一个路径重定向到另一个路径。
sensitive：路由是否大小写敏感。
strict：路由是否严格匹配最后的斜杠。

• scrollBehavior：控制路由切换时页面滚动的行为，(to, from, savedPosition) {}

/**********要导航到的路由地址*********/
to ：{
    fullPath：完整路径，包括查询参数和 hash。
    hash：当前路由的 hash 值。
    matched：包含当前路由的所有嵌套路径片段的路由记录数组。
    meta：路由元信息对象，用于存储路由的元数据。
    name：路由的名称。
    params：包含动态片段和全匹配片段的键值对对象。
    path：当前路由的路径。
    query：包含查询参数的键值对对象。
    redirectedFrom：重定向来源路由的完整路径。
}
/**********要离开的路由地址*********/
from ：{
    fullPath：完整路径，包括查询参数和 hash。
    hash：当前路由的 hash 值。
    matched：包含当前路由的所有嵌套路径片段的路由记录数组。
    meta：路由元信息对象，用于存储路由的元数据。
    name：路由的名称。
    params：包含动态片段和全匹配片段的键值对对象。
    path：当前路由的路径。
    query：包含查询参数的键值对对象。
    redirectedFrom：重定向来源路由的完整路径。
}
savedPositiono：要保存的页面位置，如果不存在则是 null

• sensitive：路由是否大小写敏感。
• strict：路由是否严格匹配最后的斜杠。
• stringifyQuery：用于序列化查询参数的函数，(query)=>{}
  2.createWebHashHistory(base)：创建hash 模式的路由历史记录对象，返回RouterHistory对象
  3.createWebHistory(base)：创建 history 模式的路由历史记录对象，返回RouterHistory对象
• base：base表示应用的基础 URL。base 参数会被添加到所有的路由路径之前，用于指定路由的基础路径。
  4.createMemoryHistory(base)：创建基于内存的路由历史记录对象的函数，通常用于测试或在不需要浏览器历史记录的情况下使用，返回RouterHistory对象
• base：base表示应用的基础 URL。base 参数会被添加到所有的路由路径之前，用于指定路由的基础路径。
  5.isNavigationFailure(error,type)：用于检查路由导航是否失败的辅助函数，一般用于路由守卫中
• error：NavigationFailure对象
• type：错误类型

NavigationFailureType.duplicated：表示导航重复
NavigationFailureType.canceled：表示导航被取消
NavigationFailureType.aborted：表示导航被中止

6.loadRouteLocation(route)：用于加载路由位置的函数，可以用于手动加载指定的路由位置。

• fullPath：完整路径，包括查询参数和 hash。
• hash：当前路由的 hash 值。
• matched：包含当前路由的所有嵌套路径片段的路由记录数组。
• meta：路由元信息对象，用于存储路由的元数据。
• name：路由的名称。
• params：包含动态片段和全匹配片段的键值对对象。
• path：当前路由的路径。
• query：包含查询参数的键值对对象。
• redirectedFrom：重定向来源路由的完整路径。
  7.onBeforeRouteLeave()：组件内部的路由守卫路由即将离开
  8.onBeforeRouteUpdate()：组件内部的路由守卫路由即将更新
  9.useLink(props)：用于生成 组件。
  10.useRouter() ：用于访问路由实例。
  11.useRoute()： 用于访问当前路由信息。

四、Router对象

1.Router.currentRoute：当前路由信息
2.Router.listening：允许关闭历史事件的监听器
3.Router.options：创建路由器时的原始选项对象
4.Router.addRoute(parentName, route)：添加一个新的路由记录，将其作为一个已有路由的子路由

• parentName：应该被加入到的父级路由记录
• route：要加入的路由记录
  5.Router.getRoutes()：获得所有路由记录的完整列表。
  6.Router.hasRoute(name)：检查一个给定名称的路由是否存在
  7.Router.removeRoute(name)：根据其名称移除一个现有的路由
  8.Router.resolve()：返回一个路由地址的规范化版本。同时包含一个包含任何现有 base 的 href 属性
  9.Router.onError(()=>{})：添加一个错误处理器，它会在每次导航遇到未被捕获的错误出现时被调用。
  10.Router.afterEach((to, from, next)=>{})：添加一个导航钩子，它会在每次导航之后被执行。返回一个用来移除该钩子的函数。
  11.Router.beforeEach((to, from, failure)=>{})：添加一个导航钩子，它会在每次导航之前被执行。返回一个用来移除该钩子的函数。
  12.Router.beforeResolve((to, from, next)=>{})：添加一个导航守卫，它会在导航将要被解析之前被执行。此时所有组件都已经获取完毕，且其它导航守卫也都已经完成调用。返回一个用来移除该守卫的函数。
  13.Router.back()：调用 history.back() 历史路由中后退
  14.Router.forward()：调用 history.forward() 在历史路由中前进
  15.Router.go(delta)：在历史路由中前进或后退，负值后退，正值前进
  16.Router.push(to)：通过将一条记录加入到历史栈中来导航到一个新的 URL
• replace：替换历史记录中的条目
• force：即使位置与当前位置相同也触发导航。除非传递replace: true，否则这也会向历史记录添加新条目。
• state：使用History API保存的状态
• name：路由记录名称
• params：路由原始路由参数，动态路由需要配置
• query：路由原始查询参数，?name=‘张三’
• hash：路由哈希值
  17.Router.replace(to)：替换历史栈中的当前记录来导航到一个新的 URL
• force：即使位置与当前位置相同也触发导航。除非传递replace: true，否则这也会向历史记录添加新条目。
• state：使用History API保存的状态
• name：路由记录名称
• params：路由原始路由参数，动态路由需要配置
• query：路由原始查询参数，?name=‘张三’
• hash：路由哈希值。

五、RouterHistory对象

1.RouterHistory.currentRoute：当前路由信息
2.RouterHistory.listening：允许关闭历史事件的监听器
3.RouterHistory.options：创建路由器时的原始选项对象
4.RouterHistory.createHref(location)：生成用于链接标签的相应的 href。
5.RouterHistory.destroy()：清除任何通过该历史实现附加的事件监听器
6.RouterHistory.go(delta，triggerListeners)：按指定方向访问历史。前进或后退
7.RouterHistory.listen()：给历史实现附加一个监听器，浏览器的前进后退按钮， 监听器就会被触发，返回用来移除该监听器的回调函数。
8.RouterHistory.push(to)：导航到一个地址
9.RouterHistory.replace(to)：替换历史栈中的当前记录来导航到一个新的 URL

六、动态路由配置

1.基本配置

• router.js

import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";

const routes = [
    {
        path: '/',
        redirect: '/home',
    }, {
        path: '/home',
        component: Home
    }, {
        path: '/list/:id/test/:name',
        name: 'list',
        component: List
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router

• 跳转list页面

<template>
  <button @click="goRouter">跳转list</button>
</template>
<script setup>
import {useRouter} from "vue-router";

const router = useRouter()

const goRouter = ()=>{
  // router.push('/list/1/test/home')
  router.push({
    name:'list',
    params:{
      id: '1',
      name:'home'
    }
  })
}
</script>

• list页面

<template>
  列表页
</template>
<script setup>
import {useRoute} from "vue-router";

const route = useRoute();
console.log(route.params)
</script>

2.正则匹配

• router.js

import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";

const routes = [
    {
        path: '/',
        redirect: '/home',
    }, {
        path: '/home',
        component: Home
    }, {
        path: '/list/:id(\\d+)',
        name: 'list',
        component: List,
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router

• 跳转list页面

<template>
  <button @click="goRouter">跳转list</button>
</template>
<script setup>
import {useRouter} from "vue-router";

const router = useRouter()

const goRouter = ()=>{
  router.push('/list/1');
  // router.push('/list/home'); //无法跳转
}
</script>

3.其他配置

const routes = [
  { path: '/:chapters+' }, //配置一个数组，匹配 /one, /one/two, /one/two/three等
  { path: '/:chapters*' },//配置一个数组，匹配 /, /one, /one/two, /one/two/three等
  { path: '/:chapters(\\d+)+' },
  { path: '/:chapters(\\d+)*' },
  { path: '/users/:userId?' }, //可选参数配置
  { path: '/users/:userId(\\d+)?' },
]

七、嵌套路由

1.基本配置

• router.js

import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";

const routes = [
    {
        path: '/',
        redirect: '/home',
    }, {
        path: '/home',
        component: Home
    }, {
        path: '/list',
        children: [{
            path: 'demo/:id(\\d+)',
            name:'listDemo',
            component: List
        }]
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router

• 跳转listDemo页面

<template>
  <button @click="goRouter">跳转list</button>
</template>
<script setup>
import {useRouter} from "vue-router";

const router = useRouter()

const goRouter = ()=>{
  // router.push('/list');
  router.push({
    name:'listDemo',
    params:{
      id:1
    }
  });
}
</script>

2.某些场景下可能需要导航到命名路由而不导航到嵌套路由，如下配置不会跳到子路由

import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";
import Demo from "@pages/demo.vue";

const routes = [
    {
        path: '/',
        redirect: '/home',
    }, {
        path: '/home',
        component: Home
    }, {
        path: '/list',
        name: 'list',
        component: List,
        children: [{
            path: 'demo/:id(\\d+)',
            name:'listDemo',
            component: Demo
        }]
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router

八、命名视图

1.router.js

import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";
import Demo from "@pages/demo.vue";

const routes = [
    {
        path: '/',
        components: {
            default:Home,
            demo: List
        }
    },
    {
        path: '/demo',
        components: {
            default:Home,
            demo: Demo
        }
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router

2.App.vue

<template>
  <h1>命名视图</h1>
  <ul>
    <li>
      <router-link to="/">默认</router-link>
    </li>
    <li>
      <router-link to="/demo">demo</router-link>
    </li>
  </ul>
  <router-view></router-view>
  <router-view name="demo"></router-view>
</template>

3.页面效果

九、路由传参

1.params传参，params传参需要配置动态路由，使用useRoute().params获取参数，参数会显示在href上

• router.js

import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";

const routes = [
    {
        path: '/',
        redirect: '/home',
    }, {
        path: '/home',
        component: Home
    }, {
        path: '/list/:id',
        component: List
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router

• 跳转list页面

<template>
  <button @click="goRouter">跳转list</button>
</template>
<script setup>
import {useRouter} from "vue-router";

const router = useRouter()

const goRouter = ()=>{
  router.push('list/1');
}
</script>

• list页

<template>
  列表页
</template>
<script setup>
import {useRoute} from "vue-router";
const route = useRoute();
console.log(route.params.id)
</script>

2.props传参，静态传参，参数不会显示在href上

• router.js

import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";

const routes = [
    {
        path: '/',
        redirect: '/home',
    }, {
        path: '/home',
        component: Home
    }, {
        path: '/list',
        component: List,
        props: {
            title:'list页'
        }
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router

• list页

<template>
  列表页
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
  title: String
});
console.log(props.title)
</script>

3.state传参，路由不需要额外增加配置，需要通过history.state获取，参数不会显示在href上

• 跳转list页

<template>
  <button @click="goRouter">跳转list</button>
</template>
<script setup>
import {useRouter} from "vue-router";

const router = useRouter()

const goRouter = ()=>{
  router.push({
    name:'list',
    state: {
      from:'home页'
    }
  });
}
</script>

• list页面

<template>
  列表页
</template>
<script setup>
console.log(history.state)
</script>

4.query传参，路由不需要额外增加配置，使用useRoute().query获取参数，参数会显示在href上

• 跳转list页

<template>
  <button @click="goRouter">跳转list</button>
</template>
<script setup>
import {useRouter} from "vue-router";

const router = useRouter()

const goRouter = ()=>{
  router.push({
    name:'list',
    query: {
      from:'home页'
    }
  });
}
</script>

• list页面

<template>
  列表页
</template>
<script setup>

import {useRoute} from "vue-router";

const route = useRoute();
console.log(route.query)
</script>

十、路由守卫

1.router.beforeEach((to, from, failure)=>{})：全局前置守卫，返回false取消当前的导航，返回路由地址重定向到一个不同的地址，如同调用 router.push()

import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";

const routes = [
    {
        path: '/',
        redirect: '/home',
    }, {
        path: '/home',
        component: Home
    }, {
        path: '/list',
        name:'list',
        component: List
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

router.beforeEach((to, from)=>{
    console.log('跳转后的路由：',to);
    console.log('来源路由：',from)
})

export default router

2.router.beforeResolve((to, from)=>{})：全局解析守卫，解析守卫刚好会在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用

router.beforeResolve((to, from)=>{
    console.log('跳转后的路由：',to);
    console.log('来源路由：',from)
})

3.router.afterEach((to, from, failure)=>{})：全局后置钩子

router.afterEach((to, from, failure) => {
    console.log('跳转后的路由：',to);
    console.log('来源路由：',from)
    console.log('导航取消：',isNavigationFailure(failure,NavigationFailureType.cancelled))
    console.log('导航终止：',isNavigationFailure(failure,NavigationFailureType.aborted))
    console.log('导航重复：',isNavigationFailure(failure,NavigationFailureType.duplicated))
})

4.路由共享守卫，beforeEnter守卫只在进入路由时触发，不会在 params、query 或 hash 改变时触发，返回false阻止跳转，可设置成数组

import {createRouter, createWebHistory} from "vue-router";
import Home from "@pages/home.vue";
import List from "@pages/list.vue";

const routes = [
    {
        path: '/',
        redirect: '/home',
    }, {
        path: '/home',
        component: Home
    }, {
        path: '/list',
        name:'list',
        component: List,
        beforeEnter: (to, from) => {
            console.log('跳转后的路由：',to);
            console.log('来源路由：',from)
            return false
        },
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router

5.组件内的守卫

<template>
  列表页
</template>
<script setup>
import {onBeforeRouteLeave, onBeforeRouteUpdate} from "vue-router";

onBeforeRouteLeave(()=>{
  console.log('导航离开渲染该组件的对应路由时调用')
})
onBeforeRouteUpdate(()=>{
  console.log('当前路由改变，但是该组件被复用时调用，如params、query改变')
})
</script>