菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue 教程

Vue 首页 Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue 为什么、如何以及设置 Vue 第一个 SFC 页面 Vue 组件 Vue Props Vue v-for 组件 Vue $emit() Vue 透传属性 Vue 作用域样式 Vue 局部组件 Vue 插槽 Vue v-slot Vue 作用域插槽 Vue 动态组件 Vue Teleport Vue HTTP 请求 Vue 模板引用 Vue 生命周期钩子 Vue Provide/Inject Vue 路由 Vue 表单输入 Vue 动画 Vue 动画与 v-for Vue 构建 Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue 示例

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

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 中的路由器在内部处理。


Vue 练习

通过练习来测试自己

练习

Vue 中的路由在“main.js”文件中设置。

填写以下空白,以便成功创建路由。

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

import App from './App.vue'
import FishTypes from './components/FishTypes.vue'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        { : '/fish', : FishTypes }
    ]
});

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

开始练习



×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持