【卷起来】VUE3.0教程-08-路由管理

在Vue中，我们可以通过vue-router路由管理页面之间的关系。

Vue Router是Vue.js的官方路由，它与Vue.js核心深度集成，让用Vue.js构建单页应用变得轻而易举。

🌲 在Vue中引入路由

• 安装路由

npm install --save vue-router

• 建立三个vue组件

<template>
    <h1>关于我们</h1>
</template>

<script setup>
</script>

<template>

    <h1>管理系统主页</h1>
</template>

<template>
    <h1>展示消息</h1>
</template>

• 配置独立的路由文件

在src中新建一个文件夹router，在其中新建一个index.js

import {createRouter,createWebHistory} from 'vue-router'

const routes = [
    {
        path:'/',
        name:'home',
        component:()=> import('../components/HomeView.vue')
    },{
        path:'/about',
        name:'about',
        component:()=> import('../components/AboutDemo.vue')
    },{
        path:'/show',
        name:'show',
        component:()=> import('../components/ShowDemo.vue')
    }
]

const router=createRouter({
    history:createWebHistory() // 去掉请求后面的#
    ,routes
})

export default router;

• 在main.js中挂载路由

import axios from 'axios'

import { createApp } from 'vue'
import App from './App.vue'
// 挂载目录
import router from './router'

const app = createApp(App)
app.config.globalProperties.$axios = axios
app.use(router)
app.mount('#app')

• 指定路由入口和路由跳转

<script setup>

  
</script>

<template>
  <!-- <AxiosDemo></AxiosDemo> -->
  <!-- <RequestAxiosDemo></RequestAxiosDemo> -->
  <div>
    <nav>
      <!--指定路由显示入口和跳转路径 -->
      <RouterLink to="/">Home</RouterLink> | 
      <RouterLink to="/about">About</RouterLink> | 
      <RouterLink to="/show">Show</RouterLink>
    </nav>
  </div>
  <div>
    <!--路由入口  -->
    <RouterView></RouterView>
    <!-- <router-view></router-view> -->
  </div>
 
</te