如何在Vue.js中使用路由
Vue路由器: Vue Router有助于链接浏览器的URL /历史记录和Vue组件,允许特定路径呈现与之关联的任何视图。 Vue路由器用于构建单页应用程序(SPA)。
在创建新项目时,默认情况下可以设置vue-router。在本文中,我们将单独安装它。这样我们就可以看到它是如何工作的。
项目设置和模块安装:
- 步骤1: 可以使用以下命令通过Npm安装Vue路由器,软件包名称为vue-router。
“`javascript npm install vue-router //或者
vue add router
</li>
</ul><pre><code class="line-numbers">可以通过以下方式使用它。
“`javascript
<script src =“https://unpkg.com/vue-router”></ script>
- 步骤2: 使用以下命令创建我们的Vue项目。
- 步骤3: 创建项目后,我们将使用以下命令添加Vue路由器。
项目结构: 它将如下所示。
示例:
main.js
index.vue
about.vue
index.js
现在让我们在我们的App.vue和index.js文件中添加我们的新路由。在添加新路由之前,我们需要在views文件夹中创建一个名为Profile.vue的新组件。
App.vue
<router-view>
可以用来根据路由显示路由组件。应用于模板中的元素时,使该元素成为一个链接,以启动导航到某个路由。导航在页面上的一个或多个<router-link>
位置打开一个或多个路由组件。这意味着当我们导航到另一个视图时,应用程序只是隐藏一些信息并显示所请求的信息。Profile.vue
运行应用程序的步骤:
使用以下命令运行服务器。
输出: 打开浏览器并转到 http://localhost:8080/ ,您将看到以下输出。