vue 路由的配置和使用——1.0

最新推荐文章于 2025-05-21 12:38:26 发布

小皮皮不皮

最新推荐文章于 2025-05-21 12:38:26 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

分类专栏： vue的一些使用技巧

本文链接：https://blog.youkuaiyun.com/fengxiaopeng74/article/details/83893403

vue的一些使用技巧专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何配置路由以及如何通过监听路由来管理用户的登录状态，确保用户在未登录状态下被引导至登录页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来说说功能然后在说路由的配置，先大概清楚了项目的流程，然后在配置路由会让你后面的工作更加顺利，头脑更加清晰！

比如说我的项目中一般都是需要登录的，最关键的是用户不操作页面一定时间后系统会默认用户退出，这时候在获取用户信息就是未登录的，还有就是有一些公共的地方，只是某一部分需要切换。

来上代码：（说明在代码下面）

export default new Router({

     routes: [

         {

             path:'/', //load

             name:"loadding",

             component: resolve => require(['../components/page/loadding.vue'], resolve),

         },

         {

             path: '/',  //这里是主页面，公共的和切换的都放到这个页面，
             component: resolve => require(['../components/common/Home.vue'], resolve),

             children:[

                 {

                     path:'/login', //登录

                     name:"login",

                     component: resolve => require(['../components/page/Login.vue'], resolve)

                 },

                 {

                     path:'/nopersition', //无权限页面

                     name:"nopersition",

                  component: resolve => require(['../components/page/nopersition.vue'], resolve)

 },

 {

     path:'/index', //首页

         name:'index',

     component: resolve => require(['../components/Home/index.vue'], resolve),

 },

 {

     path:'/step1', //步骤1

         name:"step1",

     component: resolve => require(['../components/Home/step/step1.vue'], resolve),

 },

 {

     path:'/step2', //步骤2

         name:"step2",

component: resolve => require(['../components/Home/step/step2.vue'], resolve),

 },

 {

     path:'/step3', //步骤3

         name:"step3",

     component: resolve => require(['../components/Home/step/step3.vue'], resolve),

 },

{

    path:'/organizationDetails', //详情页面

        name:'organizationDetails',

    component: resolve => require(['../components/Home/organizationMore/organizationDetails.vue'], resolve)

}

 ]

 }

 ]

 })

那么为什么要这样写呢？有一个方便的地方，那就是因为每次跳转页面都要知道用户是否还是登陆状态，如果不是就要提示他去登陆或者跳到登陆页面去。这样写的话只要在index.vue首页上面监听路由来判断就好了。那么怎么监听路由，怎么写呢？会的小伙伴儿就不用看下一个了，不会的请看下一个！