目录
通过使用路由可以很好的实现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
主要步骤:
- 定义路由组件,在路由js文件中导入需要的组件:
import Vue from 'vue' import VueRouter from 'vue-router' import HomeView from '../views/HomeView.vue' import AboutView from '../views/AboutView.vue'
- 定义路由,定义相应的path<->component:
const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component:AboutView } ]
- 创建路由实例并传递'routes'配置
const router = new VueRouter({ mode: 'history', routes })
- 导出实例
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;
}