vue路由器安装教程-前端问答-PHP中文网

vue路由器安装教程

WBOY

发布： 2023-05-08 09:10:59

原创

2401 人浏览过

Vue 是一种流行的前端开发框架，而 Vue Router 则是 Vue 的一部分，用于管理 Vue 应用程序中的路由。Vue Router 可以使您能够控制浏览器 URL 和应用程序中显示的内容。它为 Vue 应用程序提供了丰富的交互体验和页面导航功能。在本文中，我们将介绍如何安装和使用 Vue Router。

创建 Vue 项目

首先，您需要安装 Vue CLI 并创建一个新的 Vue 项目。在命令行中输入以下命令：

npm install -g @vue/cli
vue create my-project

登录后复制

上述命令将安装 Vue CLI 并使用其创建名为 "my-project" 的 Vue 项目。进入您的新项目，并在命令行中输入以下命令来启动应用程序：

cd my-project
npm run serve

登录后复制

安装 Vue Router

接下来，我们需要安装 Vue Router。在命令行中输入以下命令来安装 Vue Router：

npm install vue-router --save

登录后复制

上述命令将通过 npm 安装 Vue Router 并将其添加到您的项目依赖项中。

创建路由

接下来，我们将创建一些路由和视图组件。在 SRC 目录下创建一个名为 "router.js" 的文件。在这个文件中，我们将创建一个新的 Vue Router 实例并导出它。下面是一个简单的例子：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

登录后复制

上面的代码创建了一个名为 "home" 的路由，该路由指向名为 "Home" 的组件。要使用 Vue Router，您需要在应用程序的入口点中导入该路由。打开 "main.js" 文件并添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

登录后复制

上面的代码通过导入 "router.js" 文件并将其包含在根 Vue 实例中来启用路由。

创建视图组件

接下来，我们需要创建一些视图组件来显示不同的路由。在 "src/views" 文件夹中创建一个名为 "Home.vue" 的文件。在这个文件中，添加以下代码：

<template>
  <div>
    <h1>Welcome to the Home Page!</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

登录后复制

上述代码定义了一个简单的 "Home" 组件，该组件只有一个标题，并且没有任何交互或导航。您可以添加更多的组件并为它们创建不同的路由。

添加导航

要让用户能够导航到不同的路由和组件，我们需要在应用程序中添加一些导航元素。在 "App.vue" 文件中添加以下代码：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

登录后复制

上面的代码添加了两个链接元素，一个指向 "Home" 路由，另一个指向 "About" 路由。它还包含 <router-view> 元素，该元素将根据当前 URL 显示不同的组件。