VUE是一個高效的，靈活的，輕量的，易學易用的JavaScript框架。它采用MVVM（模型-視圖-視圖模型）模式，提供了雙向數據綁定和組件化系統，使得構建交互式用戶界面更加容易。

VUE-Router是Vue.js官方的路由管理器。它與Vue.js的核心深度集成，讓構建單頁應用更加容易。

安裝方式:

npm install vue-router --save

在main.js文件中導入Vue-Router，并且實例化我們的路由器router。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: []
})
new Vue({
router,
render: h =>h(App)
}).$mount('#app')

mode: 'history'表示使用HTML5的History API來管理頁面的路由歷史，而不是使用瀏覽器的hashchange事件實現的。

routes表示用于定義路由的數組。

現在讓我們來定義一些路由。

const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/user/:id',
name: 'User',
component: User
}
]

在這里，我們定義了三個路由：

• 根路由：path為'/',name為'Home',使用Home組件。
• /about路由：path為'/about',name為'About',使用About組件。
• /user/:id路由：path為'/user/:id',name為'User',使用User組件。 path包含一個動態參數:id，可以在組件內部通過this.$route.params.id來獲取這個id。

現在，我們需要將這些路由添加到我們的路由器中。

const router = new VueRouter({
mode: 'history',
routes
})

我們還要注意的是，當用戶訪問的URL與路由定義不匹配時，我們需要將用戶重定向到我們的404頁面，可以使用通配符路由實現。

const routes = [
// ...
{
path: '*',
component: NotFound
}
]

組件傳參：

使用{name:'params'}的方式傳遞參數

{
path:'/user/:id',
name:'user',
component:User,
props:true
}

這樣配置了之后，我們的路由路徑會自動匹配到id:{{$route.params.id}}

頁面跳轉：

使用router-link進行頁面跳轉，例如：

HomeAboutUser

這些就是我們使用Vue-Router的基本方法。