Router_路由的基本使用

BD_Marathon2025-12-25 14:16

什么是路由

定义：路由就是根据不同的URL地址展示不同的内容或页面

通俗理解：路由就像是一个地图，我们要去不同的地方，需要通过不同的路线进行导航

路由的作用

单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升用户体验；

路由还可以实现页面的认证和权限控制，保护用户的隐私和安全；

路由还可以利用浏览器的前进与后退，帮助用户更好地回到之前访问过的页面。

路由的基本使用

安装依赖

准备切换的vue

创建router.js

clike 复制代码

 // 导入创建路由对象需要使用的函数
import {createRouter,createWebHashHistory} from 'vue-router'

//  导入.vue组件
import Home from '../components/Home.vue'
import List from '../components/List.vue'
import Update from '../components/Update.vue'
import Add from '../components/Add.vue';

// 创建一个路由对象
const router = createRouter({
    // history属性用于记录路由的历史
    history:createWebHashHistory(),
    // 用于定义多个不同的路径和组件之间的对应关系
    routes:[
        {
            path:"/home",
            component:Home 
        },
        {
            path:"/list",  
            component:List
        },
        {
            path:"/add",
            component:Add 
        },
        {
            path:"/update",
            component:Update 
        },
        {
            path:"/",
            component:Home
        }
    ]
})

// 向外暴露router
export default router

修改main.js

clike 复制代码

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'


//  在整个App.vue中可以使用路由
import router from './routers/router.js'

const app = createApp(App)

app.use(router)
app.mount('#app')

修改App.vue

clike 复制代码

<script setup>
</script>
<template>
  <div>
  
    App开始的内容<br>
    <router-link to="/home">home页</router-link><br>
    <router-link to="/list">list页</router-link><br>
    <router-link to="/update">update页</router-link><br>
    <router-link to="/add">add页</router-link><br>
    <hr>
    <!-- 该标签会被替换成具体的.vue -->
    <router-view></router-view>
    <hr> 
    App结束的内容
  </div>
</template> 

<style scoped>
</style>

router-link不仅仅可以放在router-view所在页面，每个单独的.vue中也可以放

运行