vue3 router路由配置总结

main.js配置 按需引入 记得去终端下载对应的

import { createApp } from 'vue'
import App from './App.vue'

import './assets/main.css'

import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import router from '../router'

const app = createApp(App)

app.use(ElementPlus)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)}


createApp(App).use(router).mount('#app')

index.js配置

import {
    createRouter,
    createWebHistory
  } from 'vue-router'
  
import xxx from'xxx'

const routes = [
    {
        path:"/",
        name:"index",
        compoonent:() =>('../app.vue'),
    },
    {
        path:'/1',
        name:'xxx',
        component: xxx,
        children:
        [
            {
                path:'/test',
                name:'xxx',
                component: xxx,
            }，           
        ]  
    }
   
]

const router = createRouter({
    history: createWebHistory(),
    routes
  })
  

export default router

 

 

App.vue配置

<template>
  <div>
    <el-button type="primary" @click="topage">1</el-button>
  </div>
  <router-view />  //这行是显示位置，不能忘记
</template>

<script setup>
import page1 from './components/page1/page1.vue'
</script>
<script>
export default {
  components: {
    page1
  },
  methods:{
    topage(){
      this.$router.push('/1') //push路径和index.js中的path:''保持一致
    },
  }
}
</script>