vue3 路由的简单使用

 Vue  2022-04-30  admin  2602  3512

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>

image.png

image.png

如果文章对您有帮助,点击下方的广告,支持一下作者吧!

转载必须注明出处:

vue3 路由的简单使用 —— code.cent123.com

相关推荐


go web框架大全

go web框架大全

appnode Linux 服务器集群管理面板

appnode Linux 服务器集群管理面板集中式设计,快速切换管理安装一个控制中心即可管理你的所有服务器,其它服务器只需要安装受控端。再也不用分别登录到每台服务器去管理了。不限制服务器数量集中显示运行状况在线 SSH 终端连接分组管理自定义节点名称支持通过 SSH 隧道连接受控端多用户服务器权限管理(开发中)强大的网站管理功能通过整合 Nginx、PHP、MySQL 等组件,帮助您快速创建和配

CMD命令

CMD命令:开始-&gt;运行-&gt;键入cmd或command(在命令行里可以看到系统版本、文件系统版本)1. appwiz.cpl:程序和功能2. calc:启动计算器3. certmgr.msc:证书管理实用程序4. charmap:启动字符映射表5. chkdsk.exe:Chkdsk磁盘检查(管理员身份运行命令提示符)6. cleanmgr: 打开磁盘清理工具7. cliconfg:S