vue3最全路由使用教程

2023-12-08 21:52| 来源: 网络整理| 查看: 265

路由介绍我再此之前发布过vue2的基本使用，想要了解的可以去vue2路由教程

下面开始上手路由

认识vue-router

目前前端流行的三大框架, 都有自己的路由实现:

Angular的ngRouterReact的ReactRouterVue的vue-router vue-router是基于路由和组件的路由用于设定访问路径, 将路径和组件映射起来.在vue-router的单页面应用中, 页面的路径的改变就是组件的切换

安装Vue Router：npm install vue-router@4

路由的使用步骤

在这里插入图片描述

路由的基本使用流程 // history模式 import { createRouter, createWebHashHistory, } from 'vue-router' import Home from '../pages/Home.vue' import About from '../pages/About.vue' const routes = [ // 路由的默认路径 { path:'/', redirect:"/home" }, { path: '/home', component: Home }, { path: '/about', component: About }, ] // 创建路由对象 const router = createRouter({ history: createWebHashHistory(), routes }) export default router;

main.js

import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app')

App.vue

home about export default { name: "App", components: {}, }; router-link

上面有提到过router-link，下面我们来简单介绍一下他的使用 router-link事实上有很多属性可以配置：

to属性：是一个字符串，或者是一个对象replace属性：设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()；active-class属性：设置激活a元素后应用的class，默认是router-link-activeexact-active-class属性：链接精准激活时，应用于渲染的的 class，默认是router-link-exact-active；路由懒加载

如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效；

这里可以使用webpack的分包知识，而Vue Router默认就支持动态来导入组件

这是因为component可以传入一个组件，也可以接收一个函数，该函数需要放回一个Promise；

而import函数就是返回一个Promise；

const routes = [{ path: ‘/’, redirect: “/home” }, { path: ‘/home’, component: () => import(’…/pages/Home.vue’) }, { path: ‘/about’, component: () => import(’…/pages/About.vue’) }, ]

我们会发现分包是没有一个很明确的名称的，其实webpack从3.x开始支持对分包进行命名（chunk name）：在这里插入图片描述

动态路由基本匹配

很多时候我们需要将给定匹配模式的路由映射到同一个组件：

在Vue Router中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数

{ path: “/user/:id”, component: () => import(’…/pages/user.vue’) }

在router-link中进行如下跳转：

user

获取路由的值在setup中，我们要使用 vue-router库给我们提供的一个hook useRoute；

{{ route.params }} import { useRoute } from "vue-router"; export default { setup() { const route = useRoute(); return { route }; }, }; NotFound

对于哪些没有匹配到的路由，我们通常会匹配到固定的某个页面

比如NotFound的错误页面中，这个时候我们可编写一个动态路由用于匹配所有的页面； { path: '/:pathMatch(.*)', component: () => import('../pages/NotFound.vue') }

我们可以通过 $route.params.pathMatch获取到传入的参数：

匹配规则加* *我在/:pathMatch(.*)后面又加了一个；

{ path: '/:pathMatch(.*)*', component: () => import('../pages/NotFound.vue') }

在这里插入图片描述

路由的嵌套

顾名思义是子路由，界面里面还有界面

{ path: '/home', component: () => import( /* webpackChunkName:"home-chunk"*/ '../pages/Home.vue'), children: [{ path:'', redirect:'/home/product' },{ path:'product', component:()=>import('../pages/HomeProduct.vue') }] }, 代码的页面跳转

有时候我们希望通过代码来完成页面的跳转，比如点击的是一个按钮：

query方式的参数 setup() { const router = useRouter(); const jumpTo = () => { router.push({ path: "/about", query: { name: "fuck", }, }); }; return {jumpTo}; }, 在界面中通过 $route.query 来获取参数： {{$route.query}} 替换当前的位置

使用push的特点是压入一个新的页面，那么在用户点击返回时，上一个页面还可以回退，但是如果我们希望当前页面是一个替换操作，那么可以使用replace：

子界面页面的前进后退

在这里插入图片描述

router-link的v-slot

在vue-router3.x的时候，router-link有一个tag属性，可以决定router-link到底渲染成什么元素：

但是在vue-router4.x开始，该属性被移除了；而给我们提供了更加具有灵活性的v-slot的方式来定制渲染的内容；

我们使用v-slot来作用域插槽来获取内部传给我们的值：

href：解析后的 URL；

route：解析后的规范化的route对象；

navigate：触发导航的函数；

isActive：是否匹配的状态；

isExactActive：是否是精准匹配的状态；

{{ props.isActive }} {{ props.isExactActive }} router-view的v-slot

router-view也提供给我们一个插槽，可以用于和组件来包裹你的路由组件：

Component：要渲染的组件；

route：解析出的标准化路由对象；

动态添加路由

某些情况下我们可能需要动态的来添加路由：如果我们是为route添加一个children路由，那么可以传入对应的name：

// 创建路由对象 const router = createRouter({ history: createWebHashHistory(), routes }) const categoryA = { //接口返回路由信息 path: '/category', name: 'category', component: () => category }; router.addRoute("category", { path: '/child', name: 'child', component: () => import('../newpage/child.vue') }) 动态删除路由

删除路由有以下三种方式：方式一：添加一个name相同的路由；方式二：通过removeRoute方法，传入路由的名称；方式三：通过addRoute方法的返回值回调；在这里插入图片描述

路由导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。全局的前置守卫beforeEach是在导航触发时会被回调的：它有两个参数：to：即将进入的路由Route对象；from：即将离开的路由Route对象；它有返回值：false：取消当前导航；不返回或者undefined：进行默认导航；返回一个路由地址：可以是一个string类型的路径；可以是一个对象，对象中包含path、query、params等信息；可选的第三个参数：next 在Vue2中我们是通过next函数来决定如何进行跳转的；但是在Vue3中我们是通过返回值来控制的，不再推荐使用next函数，这是因为开发中很容易调用多次next；

登录守卫功能 router.beforeEach((to, from) => { console.log('to', to) console.log('from', from) if (to.path !== '/about') { const token = localStorage.setItem('token', 'qwer') if (!token) { return '/about' } } })

【本文地址】

vue3最全路由使用教程

vue3最全路由使用教程

今日新闻

推荐新闻