vue-router使用

Posted 2021-09-13 河泉

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