vue-router基本使用

运行环境:
操作系统: Win11
Node.js: v16.13.0
Vue.js: v3.4.21
原文链接:https://blog.knowlesea.top/post/3

安装 vue-router

npm install vue-router -s

创建路由对象

import {createRouter, createWebHistory} from "vue-router";
import HelloWorld from "@/components/HelloWorld.vue";

const router = createRouter({
    // history属性设置路由的工作模式
    history:createWebHistory(),
    // routes 数组指定路由规则
    // path标识路由地址
    // component标识要展示的组件
    routes:[
        {
            path:'/',
            component:HelloWorld
        }
    ]
})

// 向外共享路由对象
export default router

挂载路由对象

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from "@/routers/index.js";

// 使用use方法挂载路由模块
createApp(App).use(router).mount('#app')

设置路由页面

将路由页面放置的地方放置<router-view></router-view>

<script setup>
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <router-view></router-view>
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

说明

更改在默认创建的Vue项目上进行修改的