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>

3. vue路由相关文档

在 Vue 3 中，路由（Routing）用于定义应用程序中不同页面或视图之间的导航路径和规则。
更多vue的路由可以看以下网站 :
vue路由的官方文档
路由_基本切换效果

3. vue快速入门系列文

vue3 快速入门 (一) : 环境配置与搭建
vue3 快速入门 (二) : 第一个Vue网页
vue3 快速入门 (三) : vue中的图片路径
Vue3 快速入门 (四) : 使用路由实现页面跳转