Vue3 快速入门 (四) : 使用路由实现页面跳转

1. 本文环境

Vue版本 : 3.4.29
Node.js版本 : v20.15.0
系统 : Windows11 64位
IDE : VsCode

2. vue 路由

Vue Router 是 Vue 官方的客户端路由解决方案。
客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

接下来，我们来介绍下，如何在Vue3中，使用路由。

2.1 安装vue 路由

npm install vue-router@4

2.2 新建`router/index.ts`

新建router文件夹，然后在此文件夹下新建index.ts文件

//创建一个路由器，并暴露出去//第一步 : 引入createRouter
import { createRouter, createWebHistory } from 'vue-router'//引入一个一个可以能要呈现的组件import Home from '@/components/Home.vue'
import News from '@/components/News.vue'
import About from '@/components/About.vue'//第二步 : 创建路由器
const router = createRouter({history : createWebHistory(), //路由器的工作模式routes : [ //一个个的路由规则{path:'/home',component:Home},{path:'/news',component:News},{path:'/about',component:About},]
})//暴露出去
export default router

2.3 引入路由器

修改main.ts，引入路由器

import './assets/main.css'//引入createApp用于创建应用
import { createApp } from 'vue'
//引入App根组件
import App from './App.vue'//引入路由器
import router from './router'//场景一个应用
let app = createApp(App)
//使用路由器
app.use(router)
// 挂在整个应用到app容器中
app.mount('#app')

2.4 新建Home.vue页面

<script setup lang="ts">
</script><template><div class="app"><div>Home</div></div>
</template><style scoped></style>

2.5 新建News.vue页面

<script setup lang="ts">
</script><template><div class="app"><div>News</div></div>
</template><style scoped></style>

2.6 新建About.vue页面

<script setup lang="ts">
</script><template><div class="app"><div>About</div></div>
</template><style scoped></style>

2.7 路由跳转

修改App.vue，点击RouterLink会跳转到相应的路由，改变的区域在RouterView中

<script setup lang="ts">import { RouterLink,RouterView } from 'vue-router';
</script><template><div class="app"><h2>Vue路由测试</h2><!-- 导航区 --><div class="navigate"><RouterLink to="/home" active-class="select">首页</RouterLink><RouterLink to="/news" active-class="select">新闻</RouterLink><RouterLink to="/about" active-class="select">关于</RouterLink></div><!-- 展示区 --><div class="main-content"><RouterView></RouterView></div></div>
</template><style scoped>.select{font-size: 18px;background-color:red;}
</style>

2.8 传递参数

上面我们已经使用路由，实现了页面间的跳转。
比如跳转新闻的时候，我们想传递一个mykey的参数，就在URL中，跟上?mykey=luckey

<RouterLink to="/news?mykey=luckey" active-class="select">新闻</RouterLink>

在新闻页面News.vue中接收参数，这里通过useRoute()获取到路由，然后调用route.query.mykey获取到传参

<script setup lang="ts">import { useRoute } from 'vue-router';const route = useRoute();const mykey = route.query.mykey;console.log(mykey)
</script><template><div class="app"><div>News: {{mykey}}</div></div>
</template><style scoped></style>

2.9 点击Button的时候跳转路由

上文中是使用RouterLink组件来实现路由间的跳转，那如果想在button之类这种普通组件中，实现路由跳转，需要怎么做呢 ?
我们可以直接调用router.push()，传入路由URL，这样也能实现路由的跳转。

<script setup lang="ts">
import { useRouter } from 'vue-router';const router = useRouter();function goNews() {router.push("/news?mykey=luckey");
}
</script><template><button @click="goNews">跳转新闻</button>
</template>