VUE路由选择

安装vue-router  

npm install vue-router@4

在src/router/index.js中创建路由器，并导出

import { createRouter,createWebHistory } from "vue-router";

//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'

//定义路由关系
const routes=[
    {path:'/login',component:LoginVue},
    {path:'/',component:LayoutVue}
]

//创建路由器
const router = createRouter({
    history:createWebHistory(),
    routes:routes
})

//导出路由
export default router

在main.js中导入router并使用

import router from '@/router'

const app = createApp(App)
app.use(router)

在APP.vue中声明该变量

 具体使用

在页面代码中

import { useRouter } from 'vue-router'
const router = useRouter();
router.push('/')

 

子路由

先创建几个页面

在index.js文件中配置子路由

//导入组件
import LoginVue from '@/views/Login.vue'
import LayoutVue from '@/views/Layout.vue'

import BedInfoVue from '@/views/beds/BedInfo.vue'
import BedSchedulingVue from '@/views/beds/BedScheduling.vue'
import BedViewVue from '@/views/beds/BedView.vue'
import StatisticAnalysisVue from '@/views/beds/StatisticAnalysis.vue'

//定义路由关系
const routes=[
    {path:'/login',component:LoginVue},
    {path:'/',component:LayoutVue,redirect:'/beds/info',children:[
        {path:'/beds/info',component:BedInfoVue},
        {path:'/beds/schedule',component:BedSchedulingVue},
        {path:'/beds/view',component:BedViewVue},
        {path:'/beds/statisticanalysisVue',component:StatisticAnalysisVue}
    ]}
]

声明router-view标签

为菜单项设置index属性