Vue 路由
Vue 中的路由用于导航 Vue 应用程序,它在客户端(浏览器中)发生,无需完全重新加载页面,从而提供更快的用户体验。
路由是一种导航方式,类似于我们之前使用动态组件的方式。
通过路由,我们可以使用 URL 地址将用户引导到 Vue 应用程序中的特定位置。
使用动态组件导航
要理解 Vue 中的路由,我们首先来看一个使用动态组件在两个组件之间切换的应用程序。
我们可以使用按钮在组件之间切换
示例
FoodItems.vue
:
<template>
<h1>Food!</h1>
<p>I like most types of food.</p>
</template>
AnimalCollection.vue
:
<template>
<h1>Animals!</h1>
<p>I want to learn about at least one new animal every year.</p>
</template>
App.vue
:
<template>
<p>Choose what part of this page you want to see:</p>
<button @click="activeComp = 'animal-collection'">Animals</button>
<button @click="activeComp = 'food-items'">Food</button><br>
<div>
<component :is="activeComp"></component>
</div>
</template>
<script>
export default {
data() {
return {
activeComp: ''
}
}
}
</script>
<style scoped>
button {
padding: 5px;
margin: 10px;
}
div {
border: dashed black 1px;
padding: 20px;
margin: 10px;
display: inline-block;
}
</style>
运行示例 »
从动态组件到路由
我们使用 Vue 构建 SPA(单页应用程序),这意味着我们的应用程序只包含一个 *.html 文件。这意味着我们不能将用户引导到其他 *.html 文件来向他们展示页面上的不同内容。
在上面的示例中,我们可以在页面上的不同内容之间导航,但我们无法向其他人提供页面的地址,以便他们直接访问有关食物的部分,但通过路由我们可以做到这一点。
如果适当设置了路由,当您在 URL 地址后添加扩展名(例如“/food-items”)打开 Vue 应用程序时,您将直接进入包含食物内容的部分。
安装 Vue 路由库
要在您的机器上使用 Vue 路由,请使用终端在您的项目文件夹中安装 Vue 路由库
npm install vue-router@4
更新 main.js
要使用路由,我们必须创建一个路由器,我们在 main.js 文件中完成此操作。
main.js
:
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import FoodItems from './components/FoodItems.vue'
import AnimalCollection from './components/AnimalCollection.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/animals', component: AnimalCollection },
{ path: '/food', component: FoodItems },
]
});
const app = createApp(App)
app.use(router);
app.component('food-items', FoodItems);
app.component('animal-collection', AnimalCollection);
app.mount('#app')
第 2、8-14 和 18 行已添加,以添加路由器功能。
第 19-20 行已删除,因为组件已通过第 11-12 行的路由器包含在内。
我们现在已经创建了一个路由器,例如,如果将“/animals”添加到原始 URL 地址的末尾,它将打开“AnimalCollection”组件,但直到下一节我们添加 <router-view>
组件时,它才能工作。路由器还会跟踪网页历史记录,以便您可以使用通常位于网页浏览器左上角 URL 旁边的箭头在历史记录中前后移动。
使用 <router-view> 组件
要使用新路由器更改页面上的内容,我们需要删除上一个示例中的动态组件,并改用 <router-view>
组件。
App.vue
:
<template>
<p>Choose what part of this page you want to see:</p>
<button @click="activeComp = 'animal-collection'">Animals</button>
<button @click="activeComp = 'food-items'">Food</button><br>
<div>
<router-view></router-view>
<component :is="activeComp"></component>
</div>
</template>
如果您已在计算机上完成上述更改,则可以在浏览器中项目的 URL 地址中添加“/food”,页面应更新以显示食物内容,如下所示

使用 <router-link> 组件
我们可以用 <router-link>
组件替换按钮,因为它与路由器配合得更好。
我们不再需要“activeComp”数据属性,因此可以删除它,实际上我们甚至可以删除整个 <script>
标签,因为它是空的。
App.vue
:
<template>
<p>Choose what part of this page you want to see:</p>
<router-link to="/animals">Animals</router-link>
<router-link to="/food">Food</router-link><br>
<div>
<router-view></router-view>
</div>
</template>
<script></script>
为 <router-link> 组件设置样式
<router-link>
组件渲染为 <a>
标签。如果我们在浏览器中右键单击元素并检查它,我们可以看到这一点

正如您在上面的截图中看到的,Vue 还会跟踪哪个组件是活动组件,并为活动的 <router-link>
组件(现在渲染为 <a>
标签)提供“router-link-active”类。
我们可以使用上面的信息来设置样式,以突出显示哪个 <router-link>
组件是活动的
示例
App.vue
:
<template>
<p>Choose what part of this page you want to see:</p>
<router-link to="/animals">Animals</router-link>
<router-link to="/food">Food</router-link><br>
<div>
<router-view></router-view>
</div>
</template>
<style scoped>
a {
display: inline-block;
background-color: black;
border: solid 1px black;
color: white;
padding: 5px;
margin: 10px;
}
a:hover,
a.router-link-active {
background-color: rgb(110, 79, 13);
}
div {
border: dashed black 1px;
padding: 20px;
margin: 10px;
display: inline-block;
}
</style>
运行示例 »
注意:在上面的示例中,URL 地址未更新,但如果您在自己的机器上执行此操作,URL 地址将会更新。即使 URL 地址未更新,上面的示例也有效,因为路由由 Vue 中的路由器在内部处理。