Vue中路由的使用方法实例详解

//引入依赖
import { createRouter, createWebHistory } from 'vue-router'
//导入组件
//xx和yy可以替换为实际的内容
import XxVue from '@/views/Xx.vue'
import YyVue from '@/views/Yy.vue'
//定义路由关系
const routes = [
    //这样就可以通过http://localhost:5173/Xx访问Xx.vue的内容了
    { path: '/Xx', component: XxVue},
    //同理，可以访问Yy.vue。并将其作为默认页面
    { path: '/', component: YyVue}
]
//定义路由
const router = createRouter({
    //history是路由模式，还有一种哈希方式(createWebHashHistory)，配置方式自行探索
    history: createWebHistory(),
    routes: routes
})
//导出路由
export default router

//这里只展示主要内容,其它内容...
import { createApp } from 'vue'
import App from './App.vue'
//导入路由,默认导入index.js
//如果不是index.js，而是xx.js，则from '@/router/xx.js'
import router from '@/router'
const app = createApp(App)
app.use(router)
app.mount('#app')

<template>
    <router-view></router-view>
</template>

import {useRouter} from 'vue-router'

const xx = async() => {
    //其它内容...
    //router.push跳转到指定页面，这里是默认页面
    router.push('/')
}

//引入依赖
import { createRouter, createWebHistory } from 'vue-router'
//导入组件
//xx和yy可以替换为实际的内容
import XxVue from '@/views/Xx.vue'
import YyVue from '@/views/Yy.vue'
import ZzVue from '@/views/Zz.vue'
import HhVue from '@/views/Hh.vue'
//定义路由关系
const routes = [
    //这样就可以通过http://localhost:5173/Xx访问Xx.vue的内容了
    { path: '/Xx', component: XxVue},
    //同理，可以访问Yy.vue。并将其作为默认页面
    //redirect:'/func/xyz'是将Zz.vue页面作为进入'/'默认的访问的页面
    //children:子路由
    { path: '/', component: YyVue,redirect:'/func/xyz', children:[
        { path: '/func/xyz', component: ZzVue},
        { path: '/func/zxy', component: HhVue},
    ]}
]
//定义路由
const router = createRouter({
    //history是路由模式，还有一种哈希方式(createWebHashHistory)，配置方式自行探索
    history: createWebHistory(),
    routes: routes
})
//导出路由
export default router