vue3 ----vue-router

1、安装

npm install vue-router@next --save

2、使用

在src目录下面建一个路由文件routes.ts

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

//引入组件
import Home from "./components/home.vue"
import Location from "./components/location.vue"


const routes = [
{
    path: '', redirect: '/home' //路由重定向
}, 
{
    //alias路由别名，user访问的也是home页面，也可以配置多个 
    // 如：alias:["/c","/n"]
    path: '/home', alias: "/user", component: Home
},
 {
    path: '/location', component: Location
}
]


//配置路由

const router = createRouter({
    // history: createWebHashHistory(),//哈希模式
    history: createWebHistory(),//h5 History 模式   这种方式上线需要服务器配置伪静态
    routes
})


// 暴露路由实例对象
export default router

3、在main.ts中挂载路由

import { createApp } from 'vue'

import App from './App.vue'
import routes from "./routes"
const app = createApp(App)


//挂载路由
app.use(routes)
app.mount('#app')

4、在App.vue中通过router-view渲染组件

<template>
哎呀

 <router-link to="/">首页</router-link>
 <router-link to="/location">本地</router-link>
 <router-view></router-view>
</template>


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

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

<style lang="scss">
</style>