Vue Router

目录

HTML

router-link

router-view

JavaScript

两种历史模式

动态路由匹配

嵌套路由

命名视图

过渡动效

---

通过使用路由可以很好的实现SPA页面，即只有一个真实页面。一个页面可能承载很多功能页面，要实现不跳转来转换界面，可以通过路由链接实现。

路由大体上是一个键值对，即path<->component。路径与组件相对应，根据路径跳转到相应的组件。

HTML

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

router-link

通过自定义组件router-link来创建链接。使得Vue Router可以在不重新加载页面的情况下更改URL，处理URL的生成以及编码。其中的to属性指向JavaScript中对应的path。

router-view

router-view将显示与URL对应的组件。你可以把它放在任何地方，以适应布局。

---

JavaScript

主要步骤：

1. 定义路由组件，在路由js文件中导入需要的组件：

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import HomeView from '../views/HomeView.vue'
   import AboutView from '../views/AboutView.vue'

2. 定义路由，定义相应的path<->component：

   const routes = [
     {
       path: '/',
       name: 'home',
       component: HomeView
     },
     {
       path: '/about',
       name: 'about',
       component:AboutView
     }
   ]

3. 创建路由实例并传递'routes'配置

   const router = new VueRouter({
     mode: 'history',
     routes
   })

4. 导出实例

   export default router

---

两种历史模式

Vue的路由有两种历史模式：html5和hash

• hash模式（默认）：用createWebHashHistory()创建，它在内部传递的实际URL之前使用了一个哈希字符 '#' ，如user/#profile。这部分URL从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。
• html5模式：用createWebHistory()创建，当使用这种历史模式时，URL会看起来很正常，如user/profile。

---

动态路由匹配

很多时候，需要将给定的匹配模式的路由映射到同一个组件。例如，可能有一个User组件，它应该对所有用户进行渲染，但用户ID不同。在Vue Router中，可以在路径中使用动态字段来实现，称之为路径参数。

index.js：

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/user/:id',    //动态路由参数
    name: 'id',    
    component: User
  }
]

现在这个路由会把所有遵循/user/:id模式的URL导航到相同的 User 组件中。当一个路由被匹配时，它的params的值将在每个组件中以this.$route.params的形式暴露出来。

User组件：

<template>
    <h1>UserID: {{$route.params.id}}</h1>
</template>

此处的$route.params.id即为/user/:id中的:id

App.vue：

<router-link to="/">home</router-link>
<router-link :to="'/user/'+UserID">My</router-link>

通过v-bind的方式来传递UserID，或者通过以下方式：

<router-link :to="{name:'id',params:{id:UserID}}">My</router-link>

---

嵌套路由

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

要将组件渲染到嵌套的router-view中，需要在路由中配置children：

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/user/:id',
    name: 'id',
    component: User,
    children:[
        {
            path:'profile',    //当路径为/user/:id/profile时匹配成功
            component:HelloWorld
        }
    ]
  }
]

对应的组件：

<template>
    <div class="wrap">
    <h1>UserID: {{$route.params.id}}</h1>
    <router-link :to="'/user/'+$route.params.id+'/profile'">profile</router-link>
        <router-view></router-view>
    </div>
</template>

可以看到，children配置只是另一个路由数组，故可以根据自己的需求，不断地嵌套视图。

---

命名视图

有时候想要同时展示多个视图，而不是嵌套显示。这个时候需要使用命名视图，可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。

const routes = [
  {
    path: '/',
    name: 'home',
    components: {
        default:HomeView,
        AboutView
    }
  }
]

 其中，default对应的是没有name属性的视图，对应的组件名与name属性匹配

<router-view></router-view>
<router-view name="AboutView"></router-view>

---

过渡动效

在不同路径之间切换时，可以添加一个过渡动画，在vue3.x版本中需要使用v-slot：

<router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
        <component :is="Component"/>
    </transition>
</router-view>

同时，需要给transition添加css，此处为渐变效果：

.fade-enter-active,.fade-leave-active {
    transition: opacity 0.5s ease;
}
.fade-enter-from,.fade-leave-to{
    opacity: 0;
}