router-vue是一個基于Vue.js的路由管理器。它可以幫助我們在Vue.js應用程序中輕松地實現前端路由。在使用router-vue之前,我們需要先安裝它。
npm install vue-router --save
安裝了router-vue之后,我們就可以開始使用它了。首先,在Vue.js應用程序的入口文件app.js中引入Vue和router-vue:
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
}
]
})
在這個示例中,我們創建了兩個路由。一個是根路徑"/",代表著應用程序的主頁;另一個是路徑"/about",代表著應用程序的關于頁面。我們還需要在Vue.js應用程序中將router配置為全局組件:
new Vue({
router,
render: h =>h(App)
}).$mount('#app')
在這個示例中,我們把router配置為Vue.js應用程序的全局組件。通過這樣的配置,我們就可以在Vue.js應用程序中使用router-vue的所有功能了。比如,我們可以使用router-link標簽來實現頁面跳轉:
<template>
<div class="nav">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
<router-view/>
</template>
在這個示例中,我們使用router-link標簽來實現頁面跳轉。通過給router-link標簽設置"to"屬性,我們可以指定頁面跳轉的目標路由。