关于vue-router:vuerouter使用

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