Vue3.0 声明式导航，编程式导航，路由，路由拦截案例

项目结构

App.vue：根组件

index.js 路由器

import { createRouter, createWebHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数

const routes = [
    {
        path: "/",  //路径: 
        redirect: "/Films"  //涉及到多级页面跳转需要用路径的跳转，不能用name的跳转; 浏览器进入http://localhost:5173/ 首先要跳转的路径是/Films，即：要跳转到http://localhost:5173/Films，而进入http://localhost:5173/Films后又发现/Films要重定向到/Films/NowPlaying，这样就实现了打开http://localhost:5173/就加载出来了http://localhost:5173/Films/NowPlaying内容
        // redirect: {
        //     name: "Films" //重定向到路由名称为Tabbar的路由中，这样当浏览器输入的是：http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/Films
        // }
    },
    {
        path: "/FilmsDetail/:myid/:myname",  //路径：电影内容详细  "/FilmsDetail/:myid"的意思是：当路由以/FilmsDetail/为开头那么它后面的就是myid参数：举列：http://localhost:5173/FilmsDetail/123  那么这个123就是myid参数； 如果存在两个参数呢？"/FilmsDetail/:myid/:myname"  举列：http://localhost:5173/FilmsDetail/123/lily 那么这个123就是myid参数，lily就是myname参数
        name: "FilmsDetail",  //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/FilmsDetail.vue")
    },
    {
        path: "/Tabbar",  //路径：底部选项卡
        name: "Tabbar",  //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Tabbar.vue"),

    },
    {
        path: "/Films",  //路径:电影
        name: "Films",  //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Films.vue"),
        children: [       //通过children配置子级路由
            {
                path: 'NowPlaying', //可以写成：'/Films/NowPlaying' 但是不要写成 '/NowPlaying'(正在热映)
                name: "NowPlaying",
                component: () => import("../views/NowPlaying.vue")
            },
            {
                path: 'ComingSoon', //可以写成：'/Films/ComingSoon' 但是不要写成 '/ComingSoon'(即将上映)
                component: () => import("../views/ComingSoon.vue")
            },
            {
                //为什么在子路由中添加一个Films路由？：答：因为在进入Films组件后就需要立即加载NowPlaying组件的内容。:注意：这里需要加斜杆/Films  ；
                //从app.vue组件中进入Films组件的时候，跳转的地址是：http://localhost:5173/Films，这时候就找到了顶级路由/Films，到然进入子级路由children，发现了后/Films需要跳转到/Films/NowPlaying
                path: '/Films',
                redirect: "/Films/NowPlaying"
            },

        ]
    },
    {
        path: "/Cinemas",  //路径:影院
        name: "Cinemas",   //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Cinemas.vue")
    },
    {
        path: "/Home",  //路径:我的
        name: "Home",   //路由名称，如果不指定name 默认的name为default

        //当路由被触发时，该组件才会被异步加载，举列：打开页面就不会加载所有的组件，而是根据当前页面需要的组件进行异步加载
        //这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
        component: () => import("../views/Home.vue"),
        meta: //加一个自定义参数：里面的参数随便我们定
        {
            requireAuth: true,   // 对当前路由路径做一个标记，代表进入这个页面需要登陆才能进。用于在router.beforeEach里面做登陆验证的时候，判断这个requireAuth参数是否为true，为true则需要登陆才能进入
            aaa: "wowow"
        }
    },
    {
        path: "/Login",  //登陆
        name: "Login",   //路由名称，如果不指定name 默认的name为default
        component: () => import("../views/Login.vue"),
    },
    {
        path: "/:pathMatch(.*)",  //404错误
        name: "NotFound",  //路由名称，如果不指定name 默认的name为default
        component: () => import("../views/NotFound.vue")
    }

]

//创建路由对象
const router = createRouter({
    history: createWebHistory(),     //这种方式基于浏览器 history API 的路由模式，url的样式是：http://localhost:5173/list
    routes: routes,
})

//路由全局拦截：在进入页面之前就进行拦截。可以用于做用户登陆验证
//参数to：  表示即将进入的目标路由对象
//参数from：表示当前导航正要离开的路由
//参数next：调用该方法后才能进入下一个钩子。next() 直接进入下一个钩子,next(false) 中断当前的导航。next('/') 或者 next({ path: '/' }) 则会进入一个不同的地址。
router.beforeEach(async (to, from, next) => {
    const isAuthenticated = await localStorage.getItem('token');

    // console.log(to.fullPath); //全路径
    // console.log(to.path);     //路径
    // console.log(to.name);     //路由名称
    // console.log(to.params);   //路由参数：http://localhost:5173/FilmsDetail/123
    // console.log(to.query);    //路由参数：http://localhost:5173/FilmsDetail?myid=123
    // console.log(to.meta);     //路由自定义参数


    //meta.requireAuth表示当前请求的页面需要验证, 并且未登录
    if (to.meta.requireAuth && !isAuthenticated) {
        next(`/login?redirect=${to.path}`) //to.fullPath
    }
    else next() //如果不是请求的登陆界面，或者已经登陆过了，则直接跳转到用户请求的界面
})

//路由全局拦截：在进入页面之后才进行触发拦截。
router.afterEach(async (to, form) => {
    //用的比较少，一般用于收集一些日志信息,做用户行为分析:例如：收集页面浏览量:PV
})

export default router //导出router路由对象//导出router路由对象

main.js 挂载Vue实例，注册路由器

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import router from "../src/router/index.js" //导入路由js 
 
var app=createApp(App)
 
app.use(router) //注册路由组件
 
app.mount("#app")

Tabbar.vue：底部选项卡

Films.vue 电影

FilmsDetail.vue 电影详细信息

NowPlaying.vue： 正在热映

ComingSoon.vue：即将上映

Home.vue：我的

Login.vue：用户登陆

NotFound.vue：404错误页

Cinemas.vue：影院

效果图

进入：http://localhost:5173/ 就会自动跳转到http://localhost:5173/Films/NowPlaying页面，首页

FilmsDetail.vue电影内容

我的