引入

视频讲解
demo项目地址

vue-router官网

单页面应用肯定少不了路由，这一节咱们就来集成一下vue-router

1.引入依赖

npm install vue-router@4

2.配置vue-router

1.首先我们新建一个Demo目录，里面放一个Index.vue用作demo组件的入口文件

// demo/Index.vue
<template>
  <h1>
    这是demo页
  </h1>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>

2.我们在src下新建一个router目录，然后在里面添加一个index.ts文件，在里面配置路由

// src\router\index.ts
import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  //  hash 模式。
  history: createWebHashHistory(),
  routes: [
    // 设置首页
    {
      path: '/',
      component: () => import('../components/demo/Index.vue')
    },
    // 配置helloworld页的路径
    { 
      path: '/hello', 
      component: () => import('../components/HelloWorld.vue') 
    },
  ],
})

export default router

3.src下的main.ts中use我们的路由配置

// src\main.ts
import { createApp } from 'vue'
import "./style.css"
import App from './App.vue'
import './samples/node-api'
import router from './router'

const app = createApp(App)

// 配置路由
app.use(router)

app.mount('#app')
  .$nextTick(() => {
    postMessage({ payload: 'removeLoading' }, '*')
  })

4.App.vue文件删除原来的内容，我们直接补充一个 router-view

// src\App.vue
<script setup lang="ts">
</script>

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

<style>
</style>

5.运行项目测试效果：

3.路由跳转

我们调整demo/Index.vue的内容：

<template>
  <h1>
    这是demo页
  </h1>
  <ul>
    <li><router-link to="/hello">链接跳转helloworld页</router-link></li>
    <li><a @click="goTo('/hello')">点击事件跳转helloWorld页</a></li>
  </ul>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

// 点击事件跳转对应页面
function goTo(path: string) {
  router.push(path)
}
</script>

<style scoped>
ul {
  list-style: none;
}
</style>

HelloWorld.vue中补充一个返回上一级路由的按钮：

<script setup lang="ts">
// ...
import { useRouter } from 'vue-router'

const router = useRouter()
function goBack(){
  router.back()
}
// ...
</script>

<template>
  <el-button type="success" @click="goBack">返回上一页</el-button>
</template>

运行显示如下：