vue-router 基础用法

index.js 写法

// 导入Vue及vue-router
import Vue from 'vue'
import Router from 'vue-router'

// 这是Vue中使用插件的固定模式，
// 我们之后还会与他见面。
Vue.use(Router)

// @ 指向的目录是 src.

const __import__ = file => () => import(`@/pages/${file}.vue`)

const router = new Router({
    mode: 'history', // history: 使用/  默认hash模式，使用#分隔
    routes: [
        {
            path: '/', // 这是配置的路径 / 表示根目录，你可以配置/abcd来测试效果
            name: 'home', // 指定一个路由的名字可以省很多事，当然这是可选项
            // 在这里添加导入的组件
            component: __import__('home'),
            // 本质上只是一个对象，所以可以填任意数据，
            // 本实验中为了统一，额外的属性都将放到meta里。
            meta: {
                title: '在线做实验，高效学编程 - 实验楼'
            }
        },
        {
            path: '/courses',
            name: 'courses',
            component: __import__('courses'),
            meta: {
                title: '精选项目课程_IT热门课程_实验楼课程 - 实验楼 - 实验楼'
            }
        },
        {
            path: '/course/:id',
            name: 'course',
            component: __import__('course'),
            meta: {
                title: '- 实验楼'
            }
        }
    ]
})

router.afterEach((to) => {
    // 设置当前页面的title为meta中我们设置的title.
    document.title = to.meta.title
})

export default router