VUE3前端开发入门系列教程四:路由与页面切换

路由配置：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>