38.Vue3：引入路由配置

vue路由配置的介绍

---

内容：

页面关系如何管理？

  路由

路由：

Vue中，我们可以通过vue-router路由管理页面之间的关系，让Vue.js构建单页面应用变得更加容易

操作步骤：

第一步：准备

        安装路由npm install --save vue-router

        准备两个简单的组件，放在src/view下

第二步：

        在src/router/index.js

// 引入路由
import { createRouter, createWebHashHistory } from "vue-router";
// 引入页面
import baseView from "../view/baseView"
import aboutView from "../view/aboutView"

// 配置信息中需要的页面相关配置

//配置页面
const routes = [
    {
        path:"/", //访问的路径
        component: baseView //对应的组件
    },
    {
        path:"/about", //访问的路径
        component: aboutView //对应的组件
    }
]

// 创建路由
const router = createRouter({
    // 访问方式
    // 
    /*
        createWebHashHistory
            bash: http://localhost:8080/#/
            about:http://localhost:8080/#/about
            原理：a标签锚点连接
     */
    /*
        createWebHistory
            bash: http://localhost:8080/
            about:http://localhost:8080/about
            此种方式，需要后台配合做重定向，否则会出现404问题
            原理：H5 pushState()

    */
    history:createWebHashHistory(),
    // 路由配置信息
    routes
})

export default router

第三步：

        引入路由到项目

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from "./router" // index.js 是默认访问
            // 明确安装路由功能
createApp(App).use(router).mount('#app')

  第四步：

指定路由显示入口

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

<script>
export default {
  name: 'HelloWorld',
}
</script>

此时，可以通过输入不同的路由地址进行访问

第五步：

指定路由跳转，实现导航功能

<template>
  <router-view></router-view>
  <router-link to='/'>Base   </router-link>
  <router-link to='/about'>   About</router-link>
</template>

<script>
export default {
  name: 'HelloWorld',
}
</script>

---

 

总结

  通过路由配置，实现导航功能