前端vue路由配置步骤（VUE3前端开发入门系列教程四）

路由配置：src/Router/index.js指定URL链接转到相应的页面，比如访问http://x.x.x.x/home/about，实际访问的src/views/About.vue，今天小编就来聊一聊关于前端vue路由配置步骤?接下来我们就一起去研究一下吧!

前端vue路由配置步骤

路由配置：src/Router/index.js

指定URL链接转到相应的页面，比如访问http://x.x.x.x/home/about，实际访问的src/views/About.vue

import { createRouter, createWebHistory } from 'vue-router' const routes = [ { path: '/', redirect: '/login', meta: { needLogin: false } }, { path: '/login', name: 'login', meta: { needLogin: false }, component: () => import('@/views/Login.vue') }, { path: '/home', name: 'home', meta: { needLogin: true }, redirect: '/home/index', children: [ { path: 'index', components: { home: () => import('@/views/HomeIndex.vue') }}, { path: 'about', components: { home: () => import('@/views/About.vue') }} ], component: () => import('@/views/Home.vue') }, ]; const router = createRouter({ history: createWebHistory(), routes, }); router.beforeEach((to, from, next) => { let getFlag = localStorage.getItem('Flag') if (getFlag === 'isLogin') { next() } else { if (to.meta.needLogin) { next({path: '/login'}) } else { next() } } }) export default router;

应用src/views/Home.vue

页面切换，home页面链接点击方式to="/home/about"

<script> import { Message } from 'view-ui-plus' export default { data(){ return { theme: 'dark' } } } </script> <template> <Layout style="position:absolute;left:0;top:0px;right:0;bottom:0"> <Header style="z-index:1000"> <Menu mode="horizontal" :theme="theme" active-name="home" width="400px"> <MenuItem name="home" to="/home/index"><Icon type="ios-home" size="24" color="lightgreen" />首页</MenuItem> <Submenu name="equip"> <template #title> <Icon type="ios-barcode-outline" /> 帮助 </template> <MenuItem name="about" to="/home/about">关于</MenuItem> </Submenu> </Menu> </Header> <Content style="overflow:hidden"> <router-view name="home" /> </Content> </Layout> </template>