淘先锋技术网

首页 1 2 3 4 5 6 7

如果您正在使用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,您现在可以添加导航和路由到应用程序中!