Vue.js |路由

路由是Vue.js提供的众多功能之一，允许用户在每次加载页面时无需刷新即可在页面之间切换。这导致页面之间的平滑过渡，为用户提供更好的感觉。
设置应用程序：首先，我们需要创建一个项目来处理。为此，我们可以使用 Vue CLI（命令行界面）。在终端打开的情况下，运行以下命令。

vue init webpack vue-routing-example

在初始化过程中，请确保在提示安装vue-router时说 yes。为了在我们的应用程序中使用路由，它是必需的。初始化完成后，在终端中运行以下命令打开应用程序以检查进程是否成功：

cd vue-routing-example

npm run dev

使用这些命令，您的应用程序将被构建并部署到本地开发服务器中。
href="http://localhost:8080"
构建我们的应用程序：为了在我们的应用程序中实现路由，我们必须首先创建要路由到的页面。我们可以更改并使用HelloWorld.vue文件作为我们的第一页，并在该组件文件夹HelloGeek.vue中创建一个新文件作为我们的第二页。这些页面将没有任何功能，仅用于理解路由流程。

• 第 1 步：将HelloWorld.vue的内容替换为以下代码。模板部分是我们构建组件可见内容的地方。在这里，它将参数 (msg) 显示为从代码的脚本部分传递给它的标题。脚本部分用于保存我们代码的逻辑，在这种情况下是返回一个值。
  HelloWorld.vue：
  

javascript

 

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Hello World!'
    }
  }
}

• 第 2 步：将以下代码粘贴到HelloGeek.vue文件中。与模板和脚本部分的HelloWorld.vue相同。
  HelloGeek.vue：
• 第 3 步：现在我们已经准备好页面，我们需要配置我们的index.js文件以设置路由配置。
  • 在导入部分，我们已经导入了Vue和Router来帮助构建我们的项目。我们还导入了我们想要路由到的两个页面——HelloWorld和HelloGeek 。
  • Vue.use(strong)用于确保在我们的项目中添加路由器作为助手。
  • 路由配置是一个包含路径、名称和组件的 JavaScript 对象。我们需要将此对象添加到路由数组中。我们可以为我们的组件分配路径（URL）和名称。
  • 在这里，作为一种特殊情况，根路径被重定向到 HelloWorld 页面，因为根永远不应该为空。
• 第 4 步（可选）：用户现在可以通过将 URL 更改为http://localhost:8080/#/helloworld或http://localhost:8080/#/hellogeek来手动路由到每个页面。但是让我们设置通过链接路由的方法。
• 第 5 步：在这里我们将进行路由链接，我们可以使用 标签设置到路由的链接。 to属性将被赋予到我们需要路由的页面的路径。
  

Hello World

• 模板部分包含一张图片，后面是使用标签路由到我们页面的链接。
• 占位符标签用于定义路由组件插入 HTML 输出的位置。
• 代码的样式部分有助于设置页面样式。
  输出：