Vue3+ElementPlus+Koa2 全栈开发后台系统=＞路由封装④

本项目项目仓库地址:https://gitee.com/notlaughingzzm/vue3_elementPlus_admin.git

1.创建router.js文件

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../components/Home.vue'
import Welcome from '../components/Welcome.vue'
import Login from '../components/Login.vue'

const routes = [
    {
        name: 'home',
        path: '/',
        meta: { title:'首页' },
        component: Home,
        redirect:'/welcome',
        children: [
            {
                name: 'welcome',
                path: '/welcome',
                meta: { title:'欢迎页' },
                component:Welcome
            },
            {
                name: 'login',
                path: '/login',
                meta: { title:'登陆' },
                component:Login
            },
        ]
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

1.redirect:’/welcome’,重定向不要只写组件名字,要是路由名字,不然会报错,提示找不到
2.const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
一定要记得导出,以及和vue2的区别就是只要用到就需要createRouter

2.App.vue挂载

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

<script>
  export default{
    name:'app'
  }
</script>

<style>

</style>

到一定要记得挂载router-view,不然页面什么都不显示

3.创建三个组件分别是登陆,首页,欢迎页

• Home.vue

<template>
  <div>
    <h1>欢迎来到Vue3+antDv+vite通用模板</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:'Home',
}
</script>

<style>

</style>

• Welcome.vue

<template>
  <h1>欢迎来到主界面</h1>
  <a-button  @click="goLogin">去登陆</a-button>
  <router-view></router-view>
</template>

<script >
export default {
    name:'Welcome',
    methods:{
      goLogin(){
        this.$router.push('/login')
      }
    }
}
</script>

<style>

</style>

• Login.vue

<template>
  <h1>欢迎来到登陆</h1>
  <a-button type="primary" @click="goHome">返回首页</a-button>
</template>

<script>
import {ref,defineProps,reactive} from 'vue';
import {useRouter} from 'vue-router';

export default {
  name:'Login',
  setup(){
    const router = useRouter();
    const goHome = ()=>{
      router.push('/welcome')
    }
    return {
      goHome
    }
  }
}


</script>

<style>

</style>

1.这里设定登陆和退出事件的注意点:vue3兼容vue2的写法,可以写options API,也可以写composition API

eg:补充知识点:路由跳转的三种方式

1.前两种vue2常见的

2.第三种vue3的Composition API跳转

但实际上我们一般是这样用的哦,通过setup定义,然后return出去

setup(){
    const router = useRouter();
    const goHome = ()=>{
      router.push('/welcome')
    }
    return {
      goHome
    }
  }

4.配置main.js全局挂载antDv,以及定义好的路由router

import { createApp } from 'vue'
import Antd from 'ant-design-vue'; // 引入antd
import 'ant-design-vue/dist/antd.css'; // 引入antd样式
import App from './App.vue'
import router from './router'

const app = createApp(App);
// app.use(Antd).mount('#app');// antd全局挂载
app.use(Antd)
app.use(router).mount('#app');

5.一些注意点

1.vite创建的项目必须导入组建带上.vue后缀,不然识别不了,会报错
2.兼容vue2的语法,循序渐进的来使用vue3的api