Vue Router基础

news2024/9/22 11:30:55

Router 的作用是在单页应用（SPA）中将浏览器的URL和用户看到的内容绑定起来。当用户在浏览不同页面时，URL会随之更新，但页面不需要从服务器重新加载。

1 Router 基础

RouterView	RouterView 用于渲染当前URL路径对应的路由组件。可以放在任何地方。
RouterLink	使得Router能在不重新加载页面的情况下改变URL，处理URL的生成、编码。可以使用router.push()函数来代替。

表 Router的基础组件

Router的使用步骤：

通过调用createRouter() 函数创建Router实例。参数为一个包含路由数组、history等信息的配置项。
将路由器实例注册为插件，通过调用app.use()来完成。

Router插件的职责包括：

全局注册RouterView 和 RouterLink组件。
添加全局$router和$route属性。
启用useRouter()和useRoute()组合式函数。
触发路由器解析初始路由。

<!-- App.vue -->
<template>
<h1>Hello App!</h1>
<router-view />
</template>

<!-- router/index.ts -->
import HomePage from "@/views/HomePage.vue";
import {createRouter, createWebHashHistory} from "vue-router";

const routes = [
    { path: '/', component: HomePage }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})
export default router

<!-- main.ts -->
import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router";

const app = createApp(App)
app.use(router)
app.mount('#app')

1.1 动态路由匹配

1.在配置路由列表时，可以配置路径参数，“:参数名”的形式。这些参数及值会映射到$route.params 上的相应字段。

匹配模式	匹配路径	rout.params
/user/:username	/user/hmf	{ username: ‘hmf’ }
/user/:username/other/:info	/user/hmf/other/hello	{ username: ‘hmf’, other: ‘hello’ }

2.可以监听路由参数。

wathc(()=> route.params,(newVal){
    // 省略代码，其中route = userRoute()
})

3.在参数中自定义正则表达式。

a)在参数后面的括号里定义该参数匹配的正则表达式。

匹配路径	/user/:id(\\d+)	/user/:id
/user/hello	不匹配	匹配
/user/124	匹配	匹配，但优先级低于有正则表达式的参数。

b) 可重复的参数。如果路径参数值是一个数组，可以用*及+这两个符号将参数标记为可重复：

例如，/user/:ids(\\d+)*，匹配路径/user/123/33/23，route.params 的值为{ids: [123,33,23]}

1.1.1 sensitive 和 strict路由配置

默认情况下，所有路由是不区分大小写的，并且能匹配带有或不带有尾部斜线的路由（例如，匹配模式为/about，非严格模式下，它可以匹配/about/这个路径）。

可以在创建路由器实例时配置sensitive 和 stric。

1.2 路由配置

一些应用程序的UI由多层嵌套的组件组成。在这种情况下，URL的片段通常对应于特定的嵌套组件结构。

实现方式：在组件中包含自己嵌套的<router-view>。例如在User组件的模版内添加一个<router-view>。

<!-- User.vue -->
<template>
  <div class="user">
    <h2>User {{ $route.params.id }}</h2>
    <router-view />
  </div>
</template>

对应的路由配置为：

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        path: 'profile',
        component: UserProfile,
      },
      {
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

图嵌套组件及对应匹配的路径

路由配置时，可以给子路由命名（须唯一值）,例如：

{path: '/usr', name: 'user', component: UserHome},在路径导航时，不仅可以通过URL来匹配组件，还可以通过子路由命名。

route.push(‘/usr’) 等效于 route.push({name: ‘user’})

1.2.1 重定向和别名

{ path: '/home', redirect: '/' }，从/home 重定向到 /

{ path: '/home', redirect: { name: 'homepage' }，从/home 重定向到名为“homepage”的路由。

别名意味着URL不会改变，但是会匹配到特定路径。

{ path: '/', component: Homepage, alias: '/home' }，当路径为/及/home时都能访问到Homepage这个组件，且URL不变。

1.2.2 路由组件传参

在组件中使用$route 或useRoute()来获取路径参数，这将使得与路由耦合度更紧密，限制了组件的灵活性，因为它只能用于特定的URL。

可以通过props配置来解除这种行为。在配置路由时，props属性设置为true。

{ path: '/user/:id', component: User, props: true }

<!-- User.vue -->
<script setup>
defineProps({
  id: String
})
</script>

<template>
  <div>
    User {{ id }}
  </div>
</template>

还可以创建一个返回props的函数，将参数转换为其他类型。

{
    path: '/search',
    component: SearchUser,
    props: route => ({ query: route.query.q })
 }

1.2.3 命名视图

当需要在同级展示多个视图时，可使用命名视图。

<!-- App.vue -->

<template>
    <router-view class="view left-sidebar" name="LeftSidebar" />
    <router-view class="view main-content" />
    <router-view class="view right-sidebar" name="RightSidebar" />
</template>

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      components: {
        default: Home,
        LeftSidebar,
        RightSidebar,
      },
    },
  ],
})