Web

Web开发07

Posted by RyoCY on 2025-02-20
Estimated Reading Time 4 Minutes
Words 1.1k In Total
Viewed Times

Vue Router

详细文档查看 Vue Router

  1. 路由组件通常存放在 pages 或 views 文件夹，一般组件通常存放在 components 文件夹。
  2. 通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

路由配置文件代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// router/index.ts
import {createRouter,createWebHistory} from'vue-router'
import Home from'@/pages/Home.vue'
import About from'@/pages/About.vue'

const router = createRouter({
	history:createWebHistory(),
	routes:[
		{
			path:'/home',
			component:Home
		},
		{
			path:'/about',
			component:About
		}
	]
})
export default router

上面代码使用history模式，URL更加美观，不带有#，更接近传统的网站URL。但缺点是后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。另外一种为hash模式，兼容性更好，不需要服务器端处理路径。但是URL带有#不太美观，且在SEO优化方面相对较差。使用createWebHashHistory()而不是createWebHistory()。

to的两种写法

1
2
3
4
5
6
7
//APP.vue
<template>
<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>
<!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>
</template>

active-class 用来更改应用的类名，可不写。

命名路由

若给路由命名，可以简化路由跳转和传参

1
2
3
4
5
6
7
8
9
10
routes:[{
	name:'zhuye',
	path:'/home',
	component:Home
},{
	path:'/about',
	component:About
}]
// 使用时简化传参
<router-link :to="{name:'zhuye'}">跳转</router-link>

嵌套路由

1
2
3
4
5
6
7
8
9
10
11
routes:[{
    path: '/home',
    component: () => import('../views/Home.vue'),
    children: [{
        path: '/dashboard',
        name: 'Dashboard',
        component: () => import('../views/user/Dashboard.vue'),
        },
    ]
}] 
// 跳转路由时写完整路径

router-view 是用于显示与当前路由匹配的组件，支持嵌套路由，可以在一个组件中嵌套多个。
<router-view></router-view> 和 <router-view /> 两种写法在Vue3中均可。

1
2
3
<template>
  <router-view />
</template>

*注：组件的名字可以是 PascalCase 风格或 kebab-case 风格的。Vue 的模板编译器支持两种格式，因此 <RouterView> 和 <router-view> 通常是等效的。

重定向

将特定的路径，重新定向到已有路由。

1
2
3
4
// 从 /home 重定向到 /：
const routes = [{ path: '/home', redirect: '/' }]
// 重定向的目标也可以是一个命名的路由：
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]

路由懒加载

1
2
3
4
5
6
7
8
9
10
11
12
用动态导入代替静态导入：
// 将 import UserDetails from './views/UserDetails.vue' 替换成
const UserDetails = () => import('./views/UserDetails.vue')

const router = createRouter({
  // ...
  routes: [
    { path: '/users/:id', component: UserDetails }
    // 或在路由定义里直接使用它
    { path: '/users/:id', component: () => import('./views/UserDetails.vue') },
  ],
})

导航守卫

使用 router.beforeEach 注册一个全局前置守卫。当一个导航触发时，全局前置守卫按照创建顺序调用。

1
2
3
4
5
6
const router = createRouter({ ... })
router.beforeEach((to, from) => {
  // ...
  // 返回 false 以取消导航
  return false
})

每个守卫方法接收两个参数：

  • to: 即将要进入的目标

  • from: 当前导航正要离开的路由

返回值：

  • false: 取消当前的导航。如果浏览器的 URL 改变了，地址会重置到 from 路由对应的地址。

  • 一个路由地址: 通过一个路由地址重定向到一个不同的地址，会中断当前的导航，同时用相同的 from 创建一个新导航。

可选的第三个参数 next：需要确保 next 在任何给定的导航守卫中都被严格调用一次。

1
2
3
4
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

路由元信息

通过接收属性对象的meta属性获取附加到路由上的任意信息，如过渡名称、谁可以访问路由等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 只有经过身份验证的用户才能创建帖子
        meta: { requiresAuth: true },
      },
      {
        path: ':id',
        component: PostsDetail
        // 任何人都可以阅读文章
        meta: { requiresAuth: false },
      }
    ]
  }
]

通过 route.meta 方法访问 meta 字段，它是一个非递归合并所有 meta 字段（从父字段到子字段）的方法。也就是说可以直接访问子字段。例如：to.meta.requiresAuth

特色标签
Web
链友
ESC