Vue Router

安装

bash

npm install vue-router

引入 Router

import { createApp } from 'vue'
import App from './App.vue'
import Router from './router'

const app = createApp(App)

app.use(Router)

app.mount('#app')

配置 Routes

// route.js
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    component: () => import('./views/demo.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

路由工作模式

Hash 模式 hash 模式是用 createWebHashHistory() 创建，在内部传递的实际 URL 之前使用了一个哈希字符（#）。
HTML5 模式用 createWebHistory() 创建 HTML5 模式，推荐使用这个模式。

路由匹配

const routes = [
  {
    path: 'api',
    component: SFC
  }
]

命名路由

const routes = [
  {
    path: '/user',
    name: 'user-parent',
    component: User
  }
]

嵌套路由

const routes = [
  {
    path: '/user',
    name: 'user',
    component: User,
    children: [
      {
        path: 'profile',
        // UserProfile 组件将被渲染到 User 组件的 <router-view> 内部
        name: 'userProfile'
        component: UserProfile,
      },
      {
        path: 'posts',
        // UserPosts 组件将被渲染到 User 组件的 <router-view> 内部
        name: 'userPosts'
        component: UserPosts,
      },
      {
        path: '',
        name: 'errorPage'
        // ErrorPage 组件将被渲染到 User 组件的 <router-view> 内部
        component: ErrorPage
      },
    ],
  },
]

注意

以 / 开头的嵌套路径将被视为根路径。即子组件不必使用 / 。

声明式导航

router-link

使用 router-link 组件进行导航，通过传递 to 来指定链接(类似呈现一个带有正确 href 属性的 <a> 标签)，使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

replace 属性

router-link 组件默认追加浏览器历史记录，若要关闭则添加 replace 属性即可。

vue

<template>
  <router-link replace to="/">Home</router-link>
</template>

router-view

router-view 是 Vue Router 出口，将显示与 url 对应的组件。

RouterView 插槽

vue

<router-view v-slot="{ Component }">
  <component :is="Component" />
</router-view>

KeepAlive & Transition

vue

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

props

vue

<router-view v-slot="{ Component }">
  <component :is="Component" some-prop="a value">
    <p>Some slotted content</p>
  </component>
</router-view>

模板引用 ref

vue

<router-view v-slot="{ Component }">
  <component :is="Component" ref="mainContent" />
</router-view>

示例

vue

<template>
  <div id="app">
    <h1>Hello App!</h1>

    <p>
      <router-link to="/">Go to Home</router-link>
      <router-link :to="{path:'/about', name:'about'}">Go to About</router-link>
    </p>

    <router-view></router-view>
  </div>
</template>

编程式导航

push

import { useRouter } from 'vue-router'

const router = useRouter()

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({
  path: '/users/eduardo'
})

// params传参路径(url:`/user/123`)：只能使用name，不能使用path
router.push({
  name: 'user',
  params: { username: 'eduardo' }
})

// query传参路径(url:`/register?plan=private`)
router.push({
  path: '/register',
  query: { plan: 'private' }
})

// 哈希路由
router.push({
  path: '/about',
  hash: '#team'
})

replace

import { useRouter } from 'vue-router'

const router = useRouter()

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

push 与 replace 区别

push：会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，会回到之前的 URL
replace：在导航时不会向 history 添加新记录，会取代了当前的条目

go

import { useRouter } from 'vue-router'

const router = useRouter()

// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

示例

vue

<!--App.vue-->
<script setup>
  import { useRouter } from 'vue-router'

  const router = useRouter()

  const goToHome = () => {
    router.push('/home')
  }

  const goToHome = () => {
    router.replace('/home')
  }

  const goToBack = () => {
    router.go(1)
  }
</script>

<template>
  <button @click="goToHome">Go to Home</button>
  <button @click="goToBack">Go to Back</button>
</template>

useRoute 与 useRouter 区别

useRoute()：返回当前活动的路由对象，可以在组件中使用它来访问当前路由的信息，如路径、参数、查询等。
- fullPath：包括 search 和 hash 在内的完整地址。该字符串是经过百分号编码的。
- hash：当前地址的 hash。如果存在则以 # 开头。
- meta：从所有匹配的路由记录中合并的 meta 属性。
- name：匹配的路由名称。
- params：从 path 中提取出来并解码后的参数对象。
- path：经过百分号编码的 URL 中的 pathname 段。
- query：代表当前地址的 search 属性的对象。
useRouter()：返回路由实例，可以在组件中使用它进行编程式的路由导航。
- currentRoute: 当前的useRoute()
- addRoute(parentName, route)：添加一个新的路由记录，将其作为一个已有路由的子路由。
- afterEach(guard)：添加一个导航钩子，它会在每次导航之后被执行。返回一个用来移除该钩子的函数。
- back()：通过调用 history.back() 在可能的情况下在历史中后退。相当于 router.go(-1)。
- beforeEach(guard)：添加一个导航钩子，它会在每次导航之前被执行。返回一个用来移除该钩子的函数。
- beforeResolve(guard)：添加一个导航守卫，它会在导航将要被解析之前被执行。此时所有组件都已经获取完毕，且其它导航守卫也都已经完成调用。返回一个用来移除该守卫的函数。
- forward()：通过调用 history.forward() 在可能的情况下在历史中前进。相当于 router.go(1)。
- getRoutes()：获得所有路由记录的完整列表。
- go(delta)：允许你在历史中前进或后退。相当于 router.go()。
- hasRoute(name)：检查一个给定名称的路由是否存在。
- push(to)：程序式地通过将一条记录加入到历史栈中来导航到一个新的 URL。
- removeRoute(name)：根据其名称移除一个现有的路由。
- replace(to)：程序式地通过替换历史栈中的当前记录来导航到一个新的 URL。

命名视图

vue

<!--App.vue-->
<template>
  <div>
    <router-view name="LeftSidebar"></router-view>
    <router-view></router-view>
    <router-view name="RightSidebar"></router-view>
  </div>
</template>

// route.js
import Home from './Home.vue'
import LeftSidebar from './LeftSidebar.vue'
import RightSidebar from './RightSidebar.vue'

const routes = [
    {
      path: '/',
      components: {
        default: Home,
        // LeftSidebar: LeftSidebar 的缩写，与 `<router-view>` 上的 `name` 属性匹配
        LeftSidebar,
        // RightSidebar: RightSidebar 的缩写，与 `<router-view>` 上的 `name` 属性匹配
        RightSidebar,
      },
    },
  ],

路由重定向

// 字符串形式
const routes = [
  {
    path: '/home',
    redirect: '/'
  }
]
//对象形式
const routes = [
  {
    path: '/home',
    redirect: { name: 'homepage' }
  }
]
//函数形式
const routes = [
  {
    path: '/search/:searchText',
    redirect: (to) => {
      return {
        path: '/search',
        query: { q: to.params.searchText }
      }
    }
  }
]

例外

在写 redirect 的时候，可以省略 component 配置，因为它从来没有被直接访问过，所以没有组件要渲染。唯一的例外是嵌套路由：如果一个路由记录有 children 和 redirect 属性，它也应该有 component 属性。

const routes = [
  {
    path: '/parent',
    component: ParentComponent, //必须要写，否则报错
    redirect: '/parent/child',
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }
]

路由别名

const routes = [
  {
    path: '/',
    component: Homepage,
    alias: '/home'
  },
  {
    path: '/users',
    component: UsersLayout,
    children: [
      {
        path: '',
        component: UserList,
        alias: ['/people', 'list']
      }
    ]
  },
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      {
        path: 'profile',
        component: UserDetails,
        alias: ['/:id', '']
      }
    ]
  }
]

注意

路由别名不会创建新的路由记录。它只是为现有的路由路径提供了额外的访问方式。因此，在路由别名的情况下，任何与原始路径相关的导航守卫、动态路由参数等都会应用于别名路径。

路由传参

query参数

在 Vue Router 中，query 参数是添加到 URL 中的查询字符串，用于在路由之间传递非必要信息。这些参数不影响路由的匹配，因此可以在不更改路由定义的情况下自由地添加和修改它们。它们在 URL 中以 ? 开始，后面跟随键值对，例如 ?key=value。

注意事项

query 参数总是字符串。即使你传递了一个数字或布尔值，它也会被转换成字符串。
如果 URL 直接被访问或刷新，query 参数将保持不变，因此它们可以用于保持页面状态或进行页面间的轻量级通信。

传递 query 参数

使用声明式导航

vue

<template>
  <router-link to="your-path?key1=value1&key2=value2">Your Link</router-link>
  <router-link :to="{ path: 'your-path', query: { key1: 'value1', key2: 'value2' }}">Your Link</router-link>
</template>

使用编程式导航

vue

<script setup>
  import { useRouter } from 'vue-router'

  const router = useRouter()

  router.push({ path: 'your-path', query: { key1: 'value1', key2: 'value2' }});
</script>

获取 query 参数

vue

<script setup>
  import { toRefs} from 'vue'
  import { useRoute } from 'vue-router'

  const route = useRoute()
  const { query } = toRefs(route)

  console.log(query.key1); // 获取 'key1' 的值
</script>

params参数

在 Vue Router 中，params 参数用于定义动态片段或“路径变量”。与 query 参数不同，params 参数是路由路径的一部分，而不是 URL 的查询字符串部分。

query 与 params 区别

params 参数在传递时只能使用 name （不能使用 path ），且必须设置路由动态参数。
params 参数只能用于定义在路由配置中的路径。如果你尝试通过 router.push 或 <router-link> 添加未在路径中定义的 params 参数，这些参数将不会被识别并且不会出现在 URL 中。
在使用 params 参数时，确保 URL 中的参数名称与路由配置中定义的名称相匹配。
与 query 参数不同，如果直接访问或刷新页面，params 参数不会保留。如果需要在页面加载时保留状态，建议使用 query 参数或其他方法（如本地存储）。

设置路由动态参数

const routes = [
  { path: '/user/:userId', component: UserComponent }
];

传递 params 参数

使用声明式导航

vue

<template>
  <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
</template>

使用编程式导航

vue

<script setup>
  import { useRouter } from 'vue-router'

  const router = useRouter()

  router.push({ name: 'user', params: { userId: 123 }});
</script>

获取 params 参数

vue

<script setup>
  import { toRefs } from 'vue'
  import { useRoute } from 'vue-router'

  const route = useRoute()
  const { params } = toRefs(route)

  console.log(params.userId); // 获取 'userId' 参数的值
</script>

props配置

布尔模式：params参数

const routes = [
  { path: '/user/:userId', component: UserComponent, props: true }
];

vue

<template>
  <div>
    User ID: {{ userId }}
  </div>
</template>

<script setup>
  defineProps(['userId'])
</script>

TIP

对于有命名视图的路由，你必须为每个命名视图定义 props 配置：

const routes = [
  {
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
  }
]

函数模式：query参数

const routes = [
  {
    path: '/search',
    component: SearchResults,
    props: route => route.query
  }
];

vue

<template>
  <div>
    Searching for: {{ keywords }}
  </div>
</template>

<script setup>
  defineProps(['keywords'])
</script>

对象模式

const routes = [
  { path: '/promo', component: PromoBanner, props: { discount: '20%' } }
];

vue

<template>
  <div>
    Get a discount of {{ discount }}!
  </div>
</template>

<script setup>
  defineProms(['discount'])
</script>

导航守卫

全局守卫

全局前置守卫 beforeEach ：在路由开始导航之前被调用

router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isLoggedIn()) {
      next({ path: '/login' });
    } else {
      next();
    }
  } else {
    next();
  }
});

TIP

to: 即将要进入的目标路由对象
from: 当前导航正要离开的路由
next(): 进行管道中的下一个钩子，如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)
- next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址
- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航

全局解析守卫 beforeResolve ：在导航被确认之前，所有组件内守卫和异步路由组件被解析后调用

router.beforeResolve((to, from, next) => {
  // 可以用来确保所有异步组件都加载完毕
  next();
});

全局后置钩子 afterEach ：在导航被确认且完成之后被调用（不会接受 next 函数，也不会改变导航本身）

router.afterEach((to, from) => {
  // 用于改变页面标题、发送统计数据等
});

独享守卫

独享守卫只在进入路由时触发，不会在 params、query 或 hash 改变时触发。只有在从一个不同的路由导航时，才会被触发。

const routes = [
  {
    path: '/admin',
    component: AdminComponent,
    beforeEnter: (to, from, next) => {
      // 在这里进行特定路由的逻辑控制
      // 根据条件判断是否允许路由导航
      if (/* 条件满足 */) {
        next(); // 允许路由导航
      } else {
        next(false); // 阻止路由导航
      }
    },
  },
]

组件内守卫

进入守卫：在渲染该组件的对应路由被确认前调用

onBeforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
}

更新守卫：在当前路由改变，但是该组件被复用时调用

onBeforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
}

离开守卫：导航离开该组件的对应路由时调用

onBeforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
}

TIP

使用组合 API 和 setup 函数来编写组件，可以通过 onBeforeRouteUpdate 和 onBeforeRouteLeave 分别添加 update 和 leave 守卫。

路由元信息

定义路由元信息

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 只有经过身份验证的用户才能创建帖子
        meta: { requiresAuth: true }
      },
      {
        path: ':id',
        component: PostsDetail,
        // 任何人都可以阅读文章
        meta: { requiresAuth: false }
      },
      {
        path:'article'
        component: PostsArticle,
        // 自定义
        meta: { title:'博客' }
      }
    ]
  }
]

访问路由元信息

router.beforeEach((to, from) => {
  // 而不是去检查每条路由记录
  // to.matched.some(record => record.meta.requiresAuth)
  if (to.meta.requiresAuth && !auth.isLoggedIn()) {
    // 此路由需要授权，请检查是否已登录
    // 如果没有，则重定向到登录页面
    return {
      path: '/login',
      // 保存我们所在的位置，以便以后再来
      query: { redirect: to.fullPath },
    }
  }
})

数据获取

导航完成之后获取

先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。

vue

<template>
  <div class="post">
    <div v-if="loading" class="loading">Loading...</div>

    <div v-if="error" class="error">{{ error }}</div>

    <div v-if="post" class="content">
      <h2>{{ post.title }}</h2>
      <p>{{ post.body }}</p>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'

  const route = useRoute();
  let loading = ref(false), post = ref(null), error = ref(null);

  const fetchDate = () => {
    error.value = post.value = null
    loading.value = true

    getPost(route.params.id, (err, post) => {
      loading.value = false
      err ? error.value = err.toString() : post.value = post
    })
  }

  watch(()=>route.params,()=>{fetchDate()},{immediate:true})
</script>

导航完成之前获取

导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。

vue

<script setup>
  import { ref } from 'vue'
  import { onBeforeRouteEnter, onBeforeRouteUpdate } from 'vue-router'

  let post = ref(null), error = ref(null);

  const setDate = (err, post) => {
    err ? error.value = err : post.value = post
  }

  onBeforeRouteEnter((to, from next) => {
    getPost(to.params.id, (err, post) => next(setDate(err, post)))
  })

  onBeforeRouteUpdate(async(to, from) => {
    post.value = null
    try {
      post.value = await getPost(to.params.id)
    }catch(err){
      error.value = err.toString()
    }
  })
</script>

Vue Router ​

安装 ​

引入 Router ​

配置 Routes ​

路由匹配 ​

命名路由 ​

嵌套路由 ​

声明式导航 ​

router-link ​

router-view ​

示例 ​

编程式导航 ​

push ​

replace ​

go ​

示例 ​

命名视图 ​

路由重定向 ​

路由别名 ​

路由传参 ​

query参数 ​

传递 query 参数 ​

获取 query 参数 ​

params参数 ​

设置路由动态参数 ​

传递 params 参数 ​

获取 params 参数 ​

props配置 ​

导航守卫 ​

全局守卫 ​

独享守卫 ​

组件内守卫 ​

路由元信息 ​

定义路由元信息 ​

访问路由元信息 ​

数据获取 ​

导航完成之后获取 ​

导航完成之前获取 ​