前端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>
免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com