vue3 路由的简单使用

src/router/index.js

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

import Index from "@/views/Index";
import Home from "@/views/Home";
import About from "@/views/About";
import User from "@/views/User";

// 1. 定义路由组件.也可以从其他文件导入
//const Test = {template: '<div>Test</div>'}
//const Test2 = {template: '<div>Test2</div>'}

// 2. 定义一些路由,每个路由都需要映射到一个组件。
const routes = [
    //{path: '/test', component: Test},
    //{path: '/test2', component: Test2},

    {path: '/', component: Index},
    {path: '/home', component: Home},
    {path: '/about', component: About},
    {path: '/user', component: User},
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
export const Router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})

src/main.js

import {createApp} from 'vue'
import App from './App.vue'
import {Router} from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(Router)
app.use(ElementPlus)
app.mount('#app')

src/app.vue

<template>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple">
        <el-link type="info">
          <router-link to="/"><h2>首页</h2></router-link>
        </el-link>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple">
        <el-link type="info">
          <router-link to="/home"><h2>home</h2></router-link>
        </el-link>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple">
        <el-link type="info">
          <router-link to="/about"><h2>about</h2></router-link>
        </el-link>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple">
        <el-link type="info">
          <router-link to="/user"><h2>user</h2></router-link>
        </el-link>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple">
        <router-link to="/about">
          <el-link type="info"><h2>about</h2></el-link>
        </router-link>
      </div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple">
        <router-link to="/test">
          <el-link type="info"><h2>test</h2></el-link>
        </router-link>
      </div>
    </el-col>
  </el-row>

  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</template>

<script>
import Index from './views/Index.vue'

export default {
  name: 'App',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Index
  },
  setup() {
  }
}
</script>

<style scoped>
.el-link {
  margin-right: 8px;
}

.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}

.bg-purple {
  background-color: #d9ecff;
  text-align: center;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

src/views/about.vue

<template>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple">
        <h1>About 页面</h1>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "About"
}
</script>