前端vue路由配置步驟?路由配置：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>

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!