Vue3.0 简单商城—路由和index页面编写

上一个章节，简单编写了header组件：Vue3.0 简单商城—Header组件的编写(1) – 每天进步一点点

这篇文章简单介绍一下路由和index页面编写

1.index页面编写

我们创建一个index文件，代码参考下面

<template>
  <div>这是index文件</div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {};
  },
  components: {},
  methods: {},
};
</script>

<style  >
</style>

我们在index文件中引入Header组件。

<template>
  <div>
    <Header></Header>
  </div>
</template>

<script>
import Header from "../components/Header.vue";

export default {
  name: "index",
  data() {
    return {};
  },
  components: {
    Header,
  },
  methods: {},
};
</script>

<style  >
</style>

2.引入路由

可以参考这篇文章：vue-路由(1)：基础用法 – 每天进步一点点

我们在项目中执行

npm install vue-router@4

引入成功后，我们修改main.js

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

import router from './router'; // 导入路由


const app = createApp(App)
app.use(ElementPlus)
app.use(router);

app.mount('#app')

然后在src路径下单独创建一个文件夹router，里面创建一个index.js文件，用来存储所有的路由信息。

我们在里面定义初始路由信息

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

import index from '../components/index.vue'
// 定义路由
const routes = [
    {
        path: '/',
        name: 'index',
        component: index,
    }
];

// 创建router实例
const router = createRouter({
    history: createWebHistory(),
    routes,
});
//对外暴露路由器
export default router

3.修改App.vue

我们修改App.vue，在里面引入<router-view></router-view>

参考如下：

<template>
  <router-view></router-view>
</template>

<script>

export default {
  name: "App",
  components: {
   
  },
};
</script>

<style>
</style>

然后保存，重新运行项目。界面运行如下：