Vue Router

目录

HTML

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来创建链接。使得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的路由有两种历史模式:html5hash

  • 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;
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值