如果您正在使用Vue构建您的JavaScript应用程序,那么您可能需要使用Vue Router来通过URL管理导航和页面渲染。Vue Router是Vue.js官方的路由管理器。可以通过以下步骤安装Vue Router。
// 使用NPM安装Vue Router npm install vue-router // 使用Yarn安装Vue Router yarn add vue-router
安装完成后,您需要将Vue Router添加到您的应用程序中以使用它。您可以将Vue Router添加到Vue实例中,或者在一个独立的路由文件中添加它。以下是通过Vue实例添加Vue Router的方法。
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] }) new Vue({ router, render: h =>h(App) }).$mount('#app')
在上面的代码中,我们首先导入了Vue和Vue Router,然后将Vue Router添加到Vue实例中。我们然后使用Vue Router创建一个路由实例,其中包含我们的路由。路由由路径、名称和组件组成。我们在Vue实例中添加路由实例和根组件。
如果您使用单文件组件,则可以在文件顶部导入并添加路由组件。
import Home from '@/components/Home.vue' import About from '@/components/About.vue' const router = new VueRouter({ routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About } ] }) export default router
在这种情况下,我们将路由组件作为单个文件组件导入。我们然后从文件中导出路由实例以在任何地方使用。
无论您是在Vue实例中添加Vue Router还是在单文件组件中添加它,您都需要确保在Vue实例或父组件中使用<router-view>来渲染被匹配到的组件。您还需要使用<router-link>替代<a>来创建链接。
有了Vue Router,您现在可以添加导航和路由到应用程序中!