vue中路由的配置

Vue路由配置详解

最新推荐文章于 2025-09-02 21:41:55 发布

原创最新推荐文章于 2025-09-02 21:41:55 发布 · 656 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue中路由的配置 #vue3.0中路由的配置

Vue.js 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中配置路由，包括创建router目录及文件、定义路由组件、设置路由守卫实现登录验证等关键步骤。

在src目录下创建router目录，创建index.js+routes.js

routes.js中配置路由组件

export default {
          routes: [
                    {
                              path: '/',
                              name: 'login', // 登录页面
                              component: () => import('../views/login.vue')
                    },
                    {
                              path: '/home',
                              name: 'home', // 主页面
                              meta: {
                                        requireAuth: true // 是否需要登录判断
                              },
                              component: () => import('../views/home.vue'),
                              redirect: '/home/main', // 默认重定向到首页
                              children: [
                                        {
                                                  path: '/home/main',
                                                  name: 'main', // 首页
                                                  component: () => import('../views/main.vue')
                                        }]
}]
}

index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Routes from './routes.js' // 引入上一步的路由页面组件
Vue.use(Router)
// 1.创建路由器
const router = new Router({
  /*mode:'history', 此模式目的去掉访问地址栏的# */
  routes:Routes.routes // 使用导出的路由页面组件
});
// 2.路由守卫
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title // 设置每页的网页标题
  }
  if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录
    if (window.sessionStorage.getItem('userInfo')) { // 判断当前的登录数据是否存在
      next()
    } else {
      // 非法登录
      next({ path: '/', query: {redirect: to.fullPath} })
    }
  } else {
    next()
  }
})

// 3.导出路由器
export default router;

main.js配置：

// 引入路由器
import router from './router'
export default new Vue({
  router,
  render: h => h(App)
}).$mount('#app')