vue-router 的基本使用方式

• 1.起步
  npm install --save vue-router
  在项目中使用时，通过如下方式即可

import Vue from 'vue'
import VueRouter from 'vue-router'
//安装 Vue 的 VueRouter 插件
Vue.use(VueRouter)
//创建实例，进行配置
new VueRouter({
    //...
})

• 2.路由映射

//router-link 组件实现导航
//to 属性主要用于指定链接
to home

会被渲染为

to home

• 3.路由出口

//路由匹配到的组件会被渲染到这

• 4.定义路由组件
  首先先明确一点，一般情况下一个路由就映射一个组件。

const routes = [
    path: '/',
    component: require('./app.vue'),
    //这些组件会映射到 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',
            // 导航钩子，可以传递两个路由间的数据
               beforeEnter (to, from, next) {
                    to.meta.correctNum = from.meta.correctNum
                    next()
               }
        }
    ]
]

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

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

上面的这个路由配置就对应如下

//app.vue中