vue-router使用

import {createRouter, createWebHashHistory } from 'vue-router'
// 1. 定义路由组件
import Home from '../components/demo'
import Hello from '../components/HelloWorld'
import active from '../components/active'
import nest from '../components/nest'
import nesta from '../components/nest/a'
import nestb from '../components/nest/b'
import nestc from '../components/nest/c'

// 2. 定义路由，每个路由映射到一个组件
let routes = [
    // component可以是多个，改为components，设置default
    {
        path: '/',
        name: '/',
        // 多组件组成
        components:{
            default: Home,
            nestc
        },
        
        meta: {
            title: 'mainpage'
        }
    },
    // 重定向
    {
        path: '/demo',
        redirect: '/',
    },
    // 正常
    {
        path: '/hello',
        name: 'hello',
        component: Hello,
        // 别名
        alias:['/ceshi', '/123'],
        meta: {
            title: 'hello'
        }
    },
    // 动态路由，参数$route.params.id获取
    {
        path: '/active/:id',
        name: 'active',
        component: active,
        meta: {
            title: 'active'
        },
        // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
        props: {
            abd: 123,
            id: 123
        },
    },
    // 嵌套 
    {
        path: '/nest',
        component: nest,
        children: [
            {
                path: '',
                component: nestc
            },
            {
                path: 'a',
                component: nesta
            },
            {
                path: 'b',
                component: nestb
            }
        ],
        meta:{
            title: 'nest'
        }
    }
]

// 3. 创建路由实例并传递‘routes’配置，
const hash = createWebHashHistory()
const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: hash,
    routes
})

// 5. 监听路由
router.beforeEach((to, from, next) => {
    if (to.meta.title) {//如果设置标题，拦截后设置标题
      document.title = to.meta.title
    }
    next()
})

export default router