关于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