Vue路由vue-router的简单用法

vue-router

‌Vue Router‌是Vue.js的官方路由管理器，用于构建单页应用中的页面路由。它提供了丰富的功能，包括路由定义、路由跳转、路由参数传递、嵌套路由等，使得开发者能够方便地管理应用的路由结构。

安装

npm install vue-router

在这里插入图片描述

Demo

在这里插入图片描述

标题main.js

创建路由

import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import {createMemoryHistory, createRouter} from "vue-router";
import HelloComp from "./components/HelloComp.vue";
import TestComp from "./components/TestComp.vue";
import HomeComp from "./components/HomeComp.vue";const router = createRouter({history: createMemoryHistory(),routes: [{path: '/', component: HomeComp},{path: '/hello', component: HelloComp},{path: '/test', component: TestComp},]
})const app = createApp(App)
app.use(router)
app.mount('#app')

App.vue

在<RouterView />中加载路由页面
默认先加载的是{path: '/', component: HomeComp}

<script></script><template><div>Router测试</div><RouterView />
</template><style scoped></style>

HomeComp

通过push方法进行跳转

    gotoTest() {console.log("goto test")this.$router.push('/test')},

返回上一级

	gotoBack() {this.$router.go(-1)},

<script>export default {data() {return {btn_name_1: "跳转到：测试二维码页面",btn_name_2: "跳转到：hello页面",}},methods: {gotoTest() {console.log("goto test")this.$router.push('/test')},gotoHello() {console.log("goto hello")this.$router.push('/hello')}}
}</script><template><h1>测试首页</h1><div style="display: flex;flex-direction: column"><button class="btn" v-text="this.btn_name_1" @click="gotoTest()"/><button class="btn" v-text="this.btn_name_2" @click="gotoHello()"/></div></template><style scoped>.btn {margin: 10px;
}</style>