vue3基础之vueRouter4基本使用

安装及配置

• 直接npm i vue-router 就完了,毕竟现在最高就是4版本
• 创建路由文件夹,并书写基础配置

//src/router/index.ts
import {createRouter,createWebHashHistory} from 'vue-router'
//路由懒加载
// @ts-ignore
const home = ()=>import('../views/home/index.vue')
// @ts-ignore
const login = ()=>import('../views/login/index.vue')

//createRouter 创建路由方法
const router = createRouter({
    //createWebHashHistory 创建history路由模式方法
    history:createWebHashHistory(),
    routes:[
        {
            path: '/',
            component: home ,
            // title:'路由元页面'
        },
        {
            path:'/home',
            component:home,
            name:'Home',
        },
        {
            path:'/login',
            component:login,
            name:'Login',
        },
    ]
})
export default router;

• 项目中创建两个组件,并且在APP根组件中配置使用

//src/views/home/index.vue
<template>
  <div>Home</div>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'Home',
});
</script>
<script lang="ts" setup>

</script>
<style lang="less" scoped>

</style>

//src/views/login/index.vue
<template>
  <div>Login</div>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'Login',
});
</script>
<script lang="ts" setup>

</script>
<style lang="less" scoped>

</style>

//src/App.vue
<template>
<!-- <router-view> 写法是vue-router 提供的组件  -->
<!--  <router-view></router-view>-->
<!-- <RouterView> 写法是setup函数默认引入的组件 -->
  <RouterView></RouterView>
</template>

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'App',
});
</script>
<script lang="ts" setup>

</script>
<style lang="less" scoped>

</style>

• main.ts中注册和引入

//src/main.ts
import { createApp } from 'vue'
import './style.css'
// @ts-ignore
import App from './App.vue'
import router from "./router";

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