在vue構建中，router是非常重要的一個插件。它可以幫助我們在不同的頁面之間進行切換，從而實現單頁應用的效果。接下來，我們來看看如何在vue中構造router。

npm install vue-router

首先，先安裝vue-router插件。安裝完成之后，在main.js中引用。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

然后，我們就可以定義路由了。在一個單獨的routes.js文件中，我們定義所有的路由。

import Home from './views/Home.vue'
import About from './views/About.vue'
import Contact from './views/Contact.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
]
export default routes

定義好路由后，我們將它們掛載到Vue實例中。

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes
})
new Vue({
router
}).$mount('#app')

在Vue實例中，我們將路由掛載到router對象中，再將router對象添加到Vue實例中。這樣，我們就完成了構造router的操作。

以上就是基本的router構造方法。需要注意的是，我們在定義路由時，需要將對應的組件引入進來。每個路由都應該對應一個組件。在路由跳轉時，將對應的組件渲染出來。使用路由可以使得頁面跳轉更加流暢，用戶體驗也更佳。