vue-router

  • vue-router已关闭评论
  • 238 次浏览
  • A+
所属分类：Web前端
摘要

vue-router是一个vue的插件，用来实现前端的路由， 推荐使用 pnpm add vue-router@4 进行安装。推荐配合vue3组合式api使用
便宜好用的国外VPS推荐

安装

vue-router是一个vue的插件，用来实现前端的路由， 推荐使用 pnpm add vue-router@4 进行安装。推荐配合vue3组合式api使用

基础

从一个例子开始

<!-- App.vue文件 --> <div id="app">   <h1>Hello App!</h1>   <p>     <!--使用 router-link 组件进行导航 -->     <!--通过传递 `to` 来指定链接 -->     <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->     <router-link to="/hello/112233">hello</router-link>   </p>   <!-- 路由出口 -->   <!-- 路由匹配到的组件将渲染在这里 -->   <router-view></router-view> </div> 
// router/index.js 文件  //createRouter 用来创建路由 //createWebHashHistory 指定路由是hash模式  import { createRouter,createWebHashHistory } from 'vue-router'  import Hello from '../components/Hello.vue' import ErrorPage from '../components/ErrorPage.vue'  // 配置路由规则 const routers = [     // 匹配所有路由(正则匹配权重低)，自定义404     {path: '/:all(.*)*', component: ErrorPage},     {path: '/hello/:id',component: Hello} ]  // 导出路由 export default createRouter({     history: createWebHashHistory(),    // 这里我们使用简单的hash模式     routes: routers }) 
// main.js 文件 import { createApp } from 'vue' import './style.css' import App from './App.vue' import routers from './routers'  createApp(App)     .use(routers)		// 挂载路由     .mount('#app')

项目中的路由对象

tips: 别忘记挂载路由哦 如 use(router)

  1. $router: 通过this调用，或者通过 import导出路由也一样，此路由对象，就是导出的路由对象，可以调用push等 ... <-
  2. $route: 通过this调用，此路由对象是当前的路由对象，比如说 /Home 拿到的是当前 /Home 的路由对象，可以通过 $route.params 拿到路由参数等

动态路由

匹配规则

匹配模式 匹配路径 匹配说明 $route.params $route.query $route.hash
/users/:username /users/eduardo?sid=123#ok ok
/users/:username/posts/:postId /users/eduardo/posts/123?sid=123#ok ok
/:pathMatch(.*)* /a/b 匹配所有
/user-:afterUser(.*) /user-admin 匹配user- 以开头的
/:orderId(\d+) /123 匹配数字
/:chapters+ /a/a/a 匹配重复的（一个或多个）

从上面可以看出，路由匹配是支持自定义正则的，官方推荐的路由调试工具 https://paths.esm.dev/

Sensitive 与 strict 路由配置

const router = createRouter({   history: createWebHistory(),   routes: [     {          // /users	ok         // /Users	error         // /user/	error         path: '/users',          sensitive: true,	// 大小写敏感         strict: true, 		// 是否严格按照path匹配              },   ],   strict: true,  // 或者这里设置全局 })

嵌套路由

比如我们有两个路由 /home/user，/home/posts。可以看出来他们都是处于 /home下的，属于是嵌套关系，我们可以使用以下代码实现

const routes = [   {     path: '/home',     component: Home,     children: [			// home的子级       {         path: 'user',         component: User,       },       {         path: 'posts',         component: Posts,       },     ],   }, ]

编程式导航

顶文的有个例子使用 <router-link to="/home">点我啊</router-link> 进行路由导航，其实点击 <router-link :to="..."> 相当于调用 router.push(...)，

编程时导航就是通过js代码来跳转路由，通过以下例子介绍下

// 字符串路径 router.push('/users/admin')  // 带有路径的对象 router.push({ path: '/users/admin' })  // 命名的路由，让路由建立 url, 可以传递params， query，hash， 传递的参数vue-router会自动编码，如果放在path中需要先编码一下 router.push({ name: 'user', params: { username: 'admin' }, query: { plan: '花儿为什么这么红' }, hash: '#h1' } })
  • push: 这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL
  • replace: 会替代当前位置，无法回退，其余的同上
  • forward: 向前移动一条记录
  • back: 向后移动一条记录
  • go: go(-1)后退，反之亦然

命名路由

除了 path 之外，你还可以为任何路由提供 name。这有以下优点：

  • 没有硬编码的 URL
  • params 的自动编码/解码。
  • 防止你在 url 中出现打字错误。
const routes = [   {     path: '/user/:username',     name: 'user',     component: User,   }, ] 
router.push({ name: 'user', params: { username: 'any' } }

命名视图

有时候我们想要在同一个页面里展示多个视图，又不想嵌套展示，例如创建一个布局，sidebar(侧边栏)，main（主要区域），示例代码如下。当然也可以嵌套命名视图，

<router-view class="view left-sidebar" name="LeftSidebar"></router-view> <router-view class="view main-content"></router-view> <router-view class="view right-sidebar" name="RightSidebar"></router-view> 
const router = createRouter({   history: createWebHashHistory(),   routes: [     {       path: '/',       components: {         default: Home,         // LeftSidebar: LeftSidebar 的缩写         LeftSidebar,         // 它们与 `<router-view>` 上的 `name` 属性匹配         RightSidebar,       },     },   ], })   // 或使用嵌套命名视图  {   path: '/settings',   // 你也可以在顶级路由就配置命名视图   component: UserSettings,   children: [{     path: 'emails',     component: UserEmailsSubscriptions   }, {     path: 'profile',     components: {       default: UserProfile,       helper: UserProfilePreview     }   }] }

重定向和别名

 // redirect可以是一个字符串，一个对象，一个函数。示例如下 const routes = [   {     // /search/screens -> /search?q=screens     path: '/search/:searchText',     redirect: to => {       // 方法接收目标路由作为参数       // return 重定向的字符串路径/路径对象       return { path: '/search', query: { q: to.params.searchText } }     },   },   {     path: '/search',     // ...   }, ] 
// 别名，就是说当访问这个别名的时候，跳转到此路由，不受路由限制。推荐少用少用少用！！！  const routes = [     {         path: '/home',         alias: ['/'，‘’]		// 也可以设置两个别名     } ]

给组件传递props

我们可以通过$route拿到参数，但是这样写的话组件过于依赖路由，我们有更好的一种方式，通过设置 props: true 开启props传参, 示例如下

const routes = [   {     path: '/user/:id',     components: { default: User, sidebar: Sidebar },          // 有以下几种写法            // 1：props: true     // 2：props: { default: true, sidebar: false }     // 3：{ id: '传入的参数' }	     // 4: route=> ({ id: route.params.id })   } ]

路由模式

Hash 模式

在浏览器url使用了哈希字符 # 这部分url没有被发送服务器。 在SEO优化 有不好的影响，如果担心这个问题可以使用HTML5模式

import { createRouter, createWebHashHistory } from 'vue-router'  const router = createRouter({   history: createWebHashHistory(),   routes: [     //...   ], })

HTML5 模式

这种模式看起来像一个比较正常的url 比如 https://example.com/home/user 。 需要在服务器配置

import { createRouter, createWebHistory } from 'vue-router'  const router = createRouter({   history: createWebHistory(),   routes: [     //...   ], })

服务器配置

  1. nginx

    location / {   try_files $uri $uri/ /index.html; }

  2. node

    const http = require('http') const fs = require('fs') const httpPort = 80  http   .createServer((req, res) => {     fs.readFile('index.html', 'utf-8', (err, content) => {       if (err) {         console.log('We cannot open "index.html" file.')       }        res.writeHead(200, {         'Content-Type': 'text/html; charset=utf-8',       })        res.end(content)     })   })   .listen(httpPort, () => {     console.log('Server listening on: http://localhost:%s', httpPort)   })

    1. iis

      <?xml version="1.0" encoding="UTF-8"?> <configuration>   <system.webServer>     <rewrite>       <rules>         <rule name="Handle History Mode and custom 404/500" stopProcessing="true">           <match url="(.*)" />           <conditions logicalGrouping="MatchAll">             <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />             <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />           </conditions>           <action type="Rewrite" url="/" />         </rule>       </rules>     </rewrite>   </system.webServer> </configuration>

进阶

好啦，看到这已经理解基础了，想了解更深的话继续往下看，我们有时候需要做点别的 事情

导航守卫

导航守卫就是AOP的思想，在路由进入前、进入后 、更新，做点事情。导航守卫可以使用多个会依次执行，类似于管道，路由匹配的组件会复用。 它可以挂载到全局、单个路由、单个组件。各有妙用，望君细品。代码示例如下

全局守卫

// 进入前 router.beforeEach((to, from)=>{     //返回 false 以取消导航，也可以返回一个对象，比如 {name:'home'}，相当于重定向 })  // 或者加入第三个参数 next，如果声明了第三个参数，则必须调用一个，否则会一直等待 router.beforeEach((to, from, next)=>{          // next(false) 或者 next({path: '/home'}) })  // 进入后 router.afterEach((to, from)=>{      })  // 解析守卫,发生在beforeEach后 router.beforeResolve((to, from)=>{      })

路由专用守卫

// 进入路由触发（但是还没有进入，在beforeResolve前触发）   function removeQueryParams(to) {   if (Object.keys(to.query).length)     return { path: to.path, query: {}, hash: to.hash } }  function removeHash(to) {   if (to.hash) return { path: to.path, query: to.query, hash: '' } }   const routes = [   {     path: '/users/:id',     component: UserDetails,     beforeEnter: [removeQueryParams, removeHash],	// 可以是数组，按顺序调用   }, ]

组件内的守卫

// 选项式： beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave // 组合式：onBeforeRouteUpdate，onBeforeRouteLeave   const UserDetails = {   template: `...`,   beforeRouteEnter(to, from) {     // 在渲染该组件的对应路由被验证前调用     // 不能获取组件实例 `this` ！     // 因为当守卫执行时，组件实例还没被创建！   },   beforeRouteUpdate(to, from) {     // 在当前路由改变，但是该组件被复用时调用     // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，     // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。     // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`   },   beforeRouteLeave(to, from) {     // 在导航离开渲染该组件的对应路由时调用     // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`   }, }

完整的导航解析流程

  1. 导航被触发。
  2. 在失活的组件里调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
  5. 在路由配置里调用 beforeEnter。
  6. 解析异步路由组件。
  7. 在被激活的组件里调用 beforeRouteEnter。
  8. 调用全局的 beforeResolve 守卫(2.5+)。
  9. 导航被确认。
  10. 调用全局的 afterEach 钩子。
  11. 触发 DOM 更新。
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

路由元信息

有时候想要将信息附加到路由上，我们看下面这个例子

const routes = [   {     path: '/posts',     component: PostsLayout,     children: [       {         path: 'new',         component: PostsNew,         // 只有经过身份验证的用户才能创建帖子         meta: { requiresAuth: true }       },       {         path: ':id',         component: PostsDetail         // 任何人都可以阅读文章         meta: { requiresAuth: false }       }     ]   } ] 
// 我们可以通过 $route.meta 拿到meta数据  router.beforeEach((to, from) => {   // 而不是去检查每条路由记录   // to.matched.some(record => record.meta.requiresAuth)   if (to.meta.requiresAuth && !auth.isLoggedIn()) {     // 此路由需要授权，请检查是否已登录     // 如果没有，则重定向到登录页面     return {       path: '/login',       // 保存我们所在的位置，以便以后再来       query: { redirect: to.fullPath },     }   } })

在组合式API的应用

在组合式API公开下面两个导航守卫API

import { onBeforeRouteUpdate,onBeforeRouteLeave } from 'vue-router'

onBeforeRouteLeave: 即将离开路由

onBeforeRouteUpdate: 路由的hash或者query发生了变化

自定义router-link

 <template>     <div @click="handle">     	<slot></slot>     </div> </template>   <script>  import { RouterLink, useLink } from 'vue-router' import { computed } from 'vue'  export default {  name: 'AppLink', props: {  // 如果使用 TypeScript，请添加 @ts-ignore  ...RouterLink.props,  inactiveClass: String, }, methods:{   handle(){    this.$router.push(this.to)  } }, setup(props) {  	const {        // 解析出来的路由对象        route,        // 用在链接里的 href        href,        // 布尔类型的 ref 标识链接是否匹配当前路由        isActive,        // 布尔类型的 ref 标识链接是否严格匹配当前路由        isExactActive,        // 导航至该链接的函数        navigate        } = useLink(props)   	const isExternalLink = computed(   	 () => typeof props.to === 'string' && props.to.startsWith('http')  	)   	return { isExternalLink, href, navigate, isActive } 	 	}, }  </script>

过度动效

顾名思义就是给路由的切换添加动画效果

例子如下

<router-view v-slot="{ Component, route }">   <transition name="fade">     <component :is="Component" :key="route.path" />   </transition> </router-view>

我们用v-slot拿到了 component和route，然后通过动态组件的方式来显示，在transition指定动画效果

由于vue会自动复用看起来类似的组件，所有我们需要加上唯一 key

滚动行为

这个比较简单就是一个 api

例子如下

const router = createRouter({  history: createWebHashHistory(),  routes: [...],  scrollBehavior (to, from, savedPosition) {    // return 期望滚动到哪个的位置，示例如下  } })  /* 返回值支持以下，也可以返回promise，支持延迟滚动  return {      // 也可以这么写      // el: document.getElementById('main'),      // el: to.hash,			 定位锚点      // behavior: 'smooth',	 滚动流畅            el: '#main',      top: -10, } */

如果返回一个 falsy(非真值) 的值，或者是一个空对象，那么不会发生滚动。

返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样：

路由懒加载

vue-router支持动态导入我们这样写，示例如下

const router = createRouter({  routes: [      {           path: '/users/:id',           component: () => import('./views/UserDetails.vue')       }  ], })

为了避免请求过多，我们有时候需要组件按组分块，示例如下

// 在路由下配置webpackChunkName，vite支持webpack的这种写法。同名的设置为一组  const UserDetails = () =>  import(/* webpackChunkName: "group-user" */ './UserDetails.vue') const UserDashboard = () =>  import(/* webpackChunkName: "group-user" */ './UserDashboard.vue') const UserProfileEdit = () =>  import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')     // 我们在vite.config.js 配置  export default defineConfig({  build: {    rollupOptions: {      // https://rollupjs.org/guide/en/#outputmanualchunks      output: {        manualChunks: {          'group-user': [				// group-user组            './src/UserDetails.vue',            './src/UserDashboard.vue',            './src/UserProfileEdit.vue',          ],        },      },    },  }, })   // 配置后将会在build后 才能生效！！！！

扩展router-link

在router-link组件上封装一层(自定义 RouterLink 组件)，示例如下

<template>  <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">          <slot />  </a>  <router-link    v-else    v-bind="$props"    custom    v-slot="{ isActive, href, navigate }">          <a      v-bind="$attrs"      :href="href"      @click="navigate"      :class="isActive ? activeClass : inactiveClass">              <slot />    </a>  </router-link> </template>  <script> import { RouterLink } from 'vue-router'  export default {  name: 'AppLink',  inheritAttrs: false,   props: {    // 如果使用 TypeScript，请添加 @ts-ignore    ...RouterLink.props,    inactiveClass: String,  },   computed: {    isExternalLink() {      return typeof this.to === 'string' && this.to.startsWith('http')    },  }, } </script>

使用组件

<AppLink    v-bind="$attrs"    class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out"    active-class="border-indigo-500 text-gray-900 focus:border-indigo-700"    inactive-class="text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300"  >    点我点我 </AppLink>

路由导航检测

有时候我们需要在push后做点什么，可以在 push 前面加上 await 示例如下

通过 push等方法进行路由导航，有时候未必会成功跳转，比如已经在目标路由，或者路由返回了false，示例如下

 // push返回的是一个promise，因此我们可以这样写 await $router.push('/user/list') this.isMenuOpen = false;  // 判断是否导航成功  var navigationResult = await $router.push('/user/list'); if (navigationResult) {   // 导航被阻止 } else {   // 导航成功 (包括重新导航的情况)   this.isMenuOpen = false }  // 其实通过navigationResult对象可以拿到详细的错误信息，这个用的比较少，这里就不写了

动态路由

对于已经运行的程序，我们想添加路由，就看这里，动态路由主要通过两个函数实现 router.addRoute() 和 router.removeRoute()

 var removeRoute = router.addRoute({path: '/user', name: 'user', component: xxx }) // router.replace(router.currentRoute.value.fullPath)	// 然后手动调用replace覆盖当前路由   // 可以覆盖替换，当名字一样的情况下 removeRoute('填入路由的名字')	// 调用它的返回值可以删掉路由  // 添加嵌套路由 router.addRoute('父路由的名字', {path: '/user', name: 'user', component: xxx })  // 查看现有路由  router.hasRoute()	// 检查路由是否存在 router.getRoutes()	// 获取一个包含所有路由记录的数组

扩展

unplugin-vue-router

基于文件的自动路由，可以使用vite提供的功能（vite-plugin-pages）

也可以通过官方提供的一个插件 unplugin-vue-router

emmmm... 这个内容有点多，还是看官网吧...

GitHub unplugin-vue-router

持续学习

阅读 vue-router@4 API

详细见官网

拜了个拜~

便宜好用的国外VPS推荐