【Vue】vue3路由的安装及页面切换简单示例（图文+完整源代码）

1、路由4安装

npm install vue-router@4

2、需要准备的文件

3、main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from '../router/index'

//注意use要在mount之前
createApp(App).use(router).mount('#app')

4、根目下建立【ruoter】文件夹，以及index.js和routes.js

(1)、index.js

import {createRouter, createWebHistory} from 'vue-router'
// import routes from './routes'
import routes from './routes'

const router = createRouter({
    history: createWebHistory(), 
    routes
})

export default router

（2）、routes.js

const routes = [

    {
        name: 'home',
        path: '/home',
        component: () => import('/src/view/Home.vue')
    }
        
];

export default routes

 5、App.vue

(1)、html元素路由跳转

<template>
  <div>
    <!-- 路由跳转链接 -->
    <!-- <router-link class="box_1" to="/home" active-class="active">
      打开Box_1组件
    </router-link> -->
  </div>
  <router-view></router-view>
</template>

（2）、js路由跳转

router.push({name:'home'});

（3）、完整代码

<template>
  <div>
    <!-- 路由跳转链接 -->
    <!-- <router-link class="box_1" to="/home" active-class="active">
      打开Box_1组件
    </router-link> -->
  </div>
  <router-view></router-view>
</template>

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

import { onMounted } from "vue";

import router from '/router/index.js'
export default {
  name: "App",
  components: {
    // HelloWorld
  },
  setup() {
    onMounted(() => {
      router.push({name:'home'});
    });
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5、Home.vue

<template>
  <div class="m_box">
    <div class="label_box">
      <div
        class="label"
        style="background-color: rgb(233, 235, 252)"
        onclick="Edit(this)"
        id="29394"
      >
        <div class="top">{{name}}</div>
        <div class="line"></div>
        <div class="TaskList">
          <div>1、叶黄素和钙片</div>
          <div>2、一万步</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { reactive } from 'vue'
// import MyCsj from "@/components/MyCsj";
export default {
  name: "LoginPage",
  setup() {



    let school = "三国大学";



         // 返回定义的数据变量和方法
     return {
      // taskList,
      school
    }

  },

  methods: {
    m_click() {
      this.$router.push({ name: "HomePage" });
    },
  },
};
</script>

<style scoped>
body {
  background: #ededed;
}

.label_box {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.label {
  width: 250px;
  /* width: 15%; */
  /*flex-grow: 2;*/
  height: 300px;
  background-color: rgb(255, 252, 219);
  border-radius: 10px;
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
  overflow: hidden;
}

.line {
  /* height: 2px; */
  width: 100%;
  border-bottom: 1px #cccccc solid;
  /* margin-bottom: 10px;
  margin-top: 10px; */
}
.top {
  height: 50px;
  font-weight: bold;
  text-align: center;
  /* margin-top: 15px; */
  font-size: 16px;
  line-height: 50px;
  background-color: rgb(211, 215, 250);
  /* background-color: rgb(233, 235, 252); */
}

.TaskList {
  line-height: 40px;
  /* padding-left: 10px; */
  /* padding-right: 10px; */
  font-size: 15px;
}

.TaskList div {
  width: 100%;
  height: 40px;
  border-top: 1px solid rgb(224, 224, 224);
  padding-left: 10px;
  padding-right: 10px;
  /* background-color: aquamarine; */
}

.TaskList div:nth-child(1) {
  border-top: 0px solid rgb(241, 3, 3);
}
</style>