摘要：這些組件會(huì)映射到中的中命名路由路由元信息導(dǎo)航鉤子，可以傳遞兩個(gè)路由間的數(shù)據(jù)上面的這個(gè)路由配置就對(duì)應(yīng)如下中配置中的組件會(huì)映射到這里而最高層級(jí)的路由，將會(huì)被映射到最頂層的出口，即中以上，就是的基本使用方式，不正確的地方歡迎指出。

1.起步

npm install --save vue-router
在項(xiàng)目中使用時(shí)，通過(guò)如下方式即可

import Vue from "vue"
import VueRouter from "vue-router"
//安裝 Vue 的 VueRouter 插件
Vue.use(VueRouter)
//創(chuàng)建實(shí)例，進(jìn)行配置
new VueRouter({
    //...
})

2.路由映射

//router-link 組件實(shí)現(xiàn)導(dǎo)航
//to 屬性主要用于指定鏈接
to home

會(huì)被渲染為

to home

3.路由出口

//路由匹配到的組件會(huì)被渲染到這

4.定義路由組件
??首先先明確一點(diǎn)，一般情況下一個(gè)路由就映射一個(gè)組件。

const routes = [
    path: "/",
    component: require("./app.vue"),
    //這些組件會(huì)映射到 app.vue 中的 router-view 中
    children: [
        {
            path: "/",
            component: require("./home.vue")
        },
        {
            path: "/questions",
            component: require("./questions.vue"),
            name: "questions", // 命名路由
            //路由元信息
            meta: {
                correctNum: 0
            }
        },
        {
            path: "score",
            component: require("../page/score"),
            name: "score",
            // 導(dǎo)航鉤子，可以傳遞兩個(gè)路由間的數(shù)據(jù)
            beforeEnter (to, from, next) {
                to.meta.correctNum = from.meta.correctNum
                next()
            }
        }
    ]
]

const router = new VueRouter({
    mode: "history",
    base: __dirname,
    routes
})

new Vue({
    //...
    router
})

上面的這個(gè)路由配置就對(duì)應(yīng)如下

//app.vue中