vue3.x 路由的安装与使用

相信接触过单页面应用的同学对路由并不陌生，今天主要给大家介绍一下vue3.x的路由创建以及使用。

路由的安装

npm安装
npm install vue-router --save

yarn安装
yarn add vue-router --save

路由全局挂载

我们与模块系统一起使用时，需要在main.js文件中使用 Vue.use() 全局挂载一下路由

import Vue from 'vue'import 
VueRouter from 'vue-router'
Vue.use(VueRouter)

新建router文件

在src目录下新建router文件夹，尔后在文件夹中新建router.ts或者router.js文件

在router文件中创建配置路由

// 引入路由组件
import { createRouter,createWebHashHistory } from "vue-router";

// 引入组件
import Home from '../components/Home.vue'
import News from '../components/news.vue'
import User from '../components/user.vue'

// 配置路由
const router= createRouter({
  history: createWebHashHistory(),
  routes:[
    {path:'/',component:Home},
    {path:'/news',component:News},
    {path:'/user',component:User},
  ],
})

// 暴露路由
export default router

在main.ts/main.js文件中引入路由

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

// 引入路由
import route from './router/router'

let app = createApp(App)
// 挂载路由
app.use(route)
app.mount('#app')

最后在app.vue文件中写入router-view 动态挂载组件

<template>
<!-- 动态挂载组件 -->
  <router-view></router-view>
</template>

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

export default defineComponent({
  name: 'App',
  components: {
  }
});
</script>

<style>
#app {
  margin-top: 60px;
}
</style>

上面就是vue3.x使用路由的基本流程及方法，你学会了吗？