vue3里的路由配置

1.去掉去掉网址里的"/#"

const router = createRouter({

    history: createWebHistory(),//createWebHistory可去掉网址里的"/#"

    routes,

})

2.给网页命名

 

网页标题和meta配合，全局前置守卫：任何页面的访问都要经过这里

 meta: {

        title: '预约查询'

 },

// to：要去哪里的路由信息，from：从哪里来的路由信息，next：通行的标志

router.beforeEach((to, from, next) => {

    document.title = to.meta.title ? to.meta.title : 'XXXX//重定向管理平台';

    // to.matched 是一个数组（匹配到是路由记录）

    // to.matched.some(record => record.meta.requiresAuth)

    if (to.meta.requiresAuth) {

        if (!store.state.user) {

            // 跳转到登录页面

            next({

                name: 'login',

                query: { // 通过 url 传递查询字符串参数

                    redirect: to.fullPath // 把登录成功需要返回的页面告诉登录页面

                }

            })

        } else {

            next() // 允许通过

        }

    } else {

        next() // 允许通过

    }

})

3. 网页重定向（给网页自主设置首页）

{

        path: '/',

        redirect: { name: "login" },//重定向

 },

4.组合index.js

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
    {
        path: '/',
        redirect: { name: "login" },//重定向
    },
    {
        name: 'login',
        path: '/login',
        meta: {
            title: '登录'
        },
        component: () => import("@/login.vue"),//位置
    },
    {
        name: 'App',
        path: '/App',
        component: () => import("@/App.vue"),//位置
        children: [
            {
                name: 'AppMain',
                path: '/',
                component: () => import("@/views/AppMain.vue"),
                redirect: { name: "index" },
                children: [
                    {
                        path: "index",//子路由前不需要加斜杠 '/'
                        name: "index",
                        meta: {
                            // requiresAuth: true,//requireAuth属性作用是表明该路由是否需要登录验证
                            title: '首页'
                        },
                        component: () => import("@/views/index.vue"),
                    },
                    {
                        name: "two",
                        path: "two",
                        meta: {
                            // requiresAuth: true,//requireAuth属性作用是表明该路由是否需要登录验证
                            title: '二页'
                        },
                        component: () => import("@/views/indexPage/two.vue"),
                    },
                    
                ],
            }

        ]
    },

]


const router = createRouter({
    history: createWebHistory(),//createWebHistory可去掉网址里的"/#"
    routes,
})



//网页标题和meta配合，全局前置守卫：任何页面的访问都要经过这里

// to：要去哪里的路由信息，from：从哪里来的路由信息，next：通行的标志
router.beforeEach((to, from, next) => {
    document.title = to.meta.title ? to.meta.title : 'XXXX管理平台';
    // to.matched 是一个数组（匹配到是路由记录）
    // to.matched.some(record => record.meta.requiresAuth)
    if (to.meta.requiresAuth) {
        if (!store.state.user) {
            // 跳转到登录页面
            next({
                name: 'login',
                query: { // 通过 url 传递查询字符串参数
                    redirect: to.fullPath // 把登录成功需要返回的页面告诉登录页面
                }
            })
        } else {
            next() // 允许通过
        }
    } else {
        next() // 允许通过
    }
})



export default router