VUE--router路由--路由守卫--路由跳转--路由懒加载--路由重定向

最新推荐文章于 2024-07-05 20:26:00 发布

十友九

最新推荐文章于 2024-07-05 20:26:00 发布

阅读量173

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43778556/article/details/117386098

版权

VUE 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue.js项目中使用Vue Router进行路由配置，包括重定向、路由懒加载、嵌套路由和动态路由。同时，展示了全局路由守卫的实现，用于权限管理，拦截无权访问的页面，并演示了在组件内进行路由跳转及传递参数的方法。此外，提供了项目源码的百度网盘链接。

摘要由CSDN通过智能技术生成

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Film from '../views/Film.vue'
Vue.use(VueRouter)
const routes = [
    // 重定向
    {
        path: '*',
        redirect: '/film'
    },
    {
        path: '/film',
        component: () => import('@/views/Film.vue'),//路由懒加载
        // 嵌套路由
        children: [
            {
                path: 'nowplaying',
                component: () => import('@/views/film/Nowplaying.vue')
            },
        ]
    },
    // {
    //     path:'/detail/:myid',//动态路由
    //     component:Detail,
    //     name:'kerwinDetail'
    // },
    {
        path: '/detail',
        component: () => import('@/views/Detail.vue'),
    },
    {
        path: '/center',
        component: () => import('@/views/Center.vue')
    }, 
]
const router = new VueRouter({
    //路由模式 
    // a.hash     #/home  
    // b.history  /home
    mode: 'hash',
    routes
})
// 全局路由守卫
router.beforeEach((to, from, next) => {
    const auth = ['/center', '/order']
    if (auth.includes(to.fullPath)) {
        // 拦截
        if (!localStorage.getItem('token')) {
            next('/login')
        } else {
            // 放行
            next()
        }
    } else {
        next()
    }
})
export default router

// 组件内的路由拦截

    beforeRouteEnter(to,from,next){
        // 拦截
        if(!localStorage.getItem('token')){
            next('/login')
        }else{
            next()
        }
    },

路由跳转

跳转携带参数

 handleClick(id){
        // 1.路径
        // this.$router.push(`/detail/${id}`)
        // 2.路由名字
        // this.$router.push({
        //     name:'kerwinDetail',
        //     params:{
        //         myid:id
        //     }
        // })
        // 3.query方式跳转详情
        this.$router.push(`/detail?id=${id}`)
    },

目标页获得参数

	// 1,2
    console.log(this.$route.params.myid);
    // 3
    console.log(this.$route.query.id);

路由配置

//1，
{
    path:'/detail/:myid',//动态路由
    component:Detail,
    name:'kerwinDetail'
},
//2，3
{
    path: '/detail',
    component: () => import('@/views/Detail.vue'),
},

项目源码：
链接：https://pan.baidu.com/s/1K8HnVEZy87O6-gl6qsZnxw
提取码：t70u
复制这段内容后打开百度网盘手机App，操作更方便哦