Routing is to click on a link or button to jump to another interface. In vue, vue-router is generally used to complete the routing operation.
Next, we perform routing jumps and nested routing instance operations.
1. First establish a normal running program
2. Install vue-router
Install the router using the following command
npm install vue-router@4
After the installation is complete, you can see it in package.json
3. First we create 6 vue files
For the sake of beauty, we install element-plus, which will not be demonstrated here.
A1
<template>
我是A1界面
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</template>
<script>
</script>
<style>
</style>
A2-1
<template>
我是A2-1界面
</template>
<script>
</script>
<style>
</style>
A3
<template>
我是A3界面
</template>
<script>
</script>
<style>
</style>
B
<template>
我是B界面
</template>
<script>
</script>
<style>
</style>
C
<template>
我是C界面
</template>
<script>
</script>
<style>
</style>
Demo Main
<script setup>
</script>
<template>
<el-container>
<el-aside style="background-color:#c6e2ff; ">
<el-menu :default-openeds="['1']" :unique-opened="true" active-text-color="#ffd04b"
background-color="#545c64" text-color="#fff">
<el-sub-menu index="1">
<template #title>
<span>A目录</span>
</template>
<router-link to="/DemoMain/A1" style="text-decoration: none">
<el-menu-item index="1-2">A1目录</el-menu-item>
</router-link>
<el-sub-menu index="1-3">
<template #title>A2目录</template>
<router-link to="/DemoMain/A2-1" style="text-decoration: none">
<el-menu-item index="1-3-1">A2-1目录</el-menu-item>
</router-link>
</el-sub-menu>
<router-link to="/DemoMain/A3" style="text-decoration: none">
<el-menu-item index="1-2">A3目录</el-menu-item>
</router-link>
</el-sub-menu>
<router-link to="/DemoMain/B" style="text-decoration: none">
<el-menu-item index="2">
B目录
</el-menu-item>
</router-link>
<router-link to="/DemoMain/C" style="text-decoration: none">
<el-menu-item index="3">
C目录
</el-menu-item>
</router-link>
</el-menu>
</el-aside>
<el-container>
<el-header style="background-color: #d1edc4; ">Header</el-header>
<el-main style="background-color:#c8c9cc; ">
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<style scoped>
</style>
Among them, DemoMain is the code of the main interface, which is also the most critical.
4. Create a folder store, and then create a router.js file for routing configuration
the code
import {
createRouter,
createWebHashHistory
} from 'vue-router'
// 配置路由
const router = createRouter({
history: createWebHashHistory(),
routes: [{
path: '/',
redirect: '/DemoMain' //初始化默认值 需要配置 和下面配置要一样
},
// {
// path: '/DemoMain',
// component: () => import("../components/DemoMain.vue")
// },
{
path: "/DemoMain",
redirect: '/DemoMain/A1',
component: () => import("../components/DemoMain.vue"), //初始化默认值 需要配置 和下面配置要一样
children: [{
path: 'A1',
component: () => import("../components/A1.vue")
},
{
path: 'A2-1',
component: () => import("../components/A2-1.vue")
},
{
path: 'A3',
component: () => import("../components/A3.vue")
},
{
path: 'B',
component: () => import("../components/B.vue")
},
{
path: 'C',
component: () => import("../components/C.vue")
}
]
}
]
})
// router.beforeEach((to, from, next) => {
// //这里对路由的值,进行判断
// // if (to.path === '/Login') { // 1.如果访问的是登录页面(无需权限),直接放行 || to.path === '/register'
// // return next()
// // }
// // next()
// })
export default router
5. Finally modify the App.vue file
<script setup>
</script>
<template>
<router-view></router-view>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 0px;
}
html,
body,
#app,
.el-container {
/*设置内部填充为0,几个布局元素之间没有间距*/
padding: 0px;
/*外部间距也是如此设置*/
margin: 0px;
/*统一设置高度为100%*/
height: 100%;
}
</style>
6. Effect