Vue3全家桶 - VueRouter - 【1】快速使用（创建路由模块 + 规定路由模式 + 使用路由规则 + RouterView-RouterLink）

VueRouter 
Vue-Router官网；
vue-router 是 vue.js 官方给出的路由解决方案，能够轻松的管理 SPA 项目中组件的切换；
安装：yarn add vue-router@4；
 
快速使用 
1.1 创建路由模块 
在项目中的 src 文件夹中创建一个 router 文件夹，在其中创建 index.js 模块；
采用 createRouter() 创建路由，并暴露出去；
在 main.js 文件中初始化路由模块 app.use(router)
示例代码： router/index.js：
 import { createRouter } from 'vue-router'// TODO 创建路由
const router = createRouter({// 相关配置
})export default router
 main.js：
 import { createApp } from 'vue'
import App from './App.vue'
import router from './router'  // 引入路由模块
let app = createApp(App)app.use(router) // 初始化路由插件app.mount('#app')
 
 
1.2 规定路由模式 
hsitory路由模式可采用：
createWebHashHistory()：hash模式： 它在内部传递的实际URL之前使用了一个哈希字符#；
由于这部分URL从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理；
 
createWebHistory()： history模式，推荐使用； 当使用这种历史模式时，URL会看起来很正常（URL中不带#号）；
由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问URL，就会得到一个404错误，要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由，如果URL不匹配任何静态资源，它应提供与你的应用程序中的index.html相同的页面；
 
示例代码： history路由模式：import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'// TODO 创建路由
const router = createRouter({// TODO 规定路由模式history: createWebHistory(),
})export default router
 
hash路由模式：import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'// TODO 创建路由
const router = createRouter({// TODO 规定路由模式history: createWebHashHistory(),
})export default router
 
 
 
1.3 使用路由规则 
routes配置路由规则： path：路由匹配的URL；
name：当路由指向此页面时显示的名字；
component：路由调用这个页面时加载的组件；
 
路由模块用到的组件： HomeVue.vue：<script setup>
import { ref, reactive, computed, onMounted } from 'vue'onMounted(() => {});
</script><template><div class="home">网站首页界面</div>
</template><style scoped>
.home {color: #fff;font-size: 24px;background-color: #ff0040;
}
</style>
 
BlogHomeVue.vue：<script setup>
import { ref, reactive, computed, onMounted } from 'vue'onMounted(() => {});
</script><template><div class="blog-home">博客首页界面</div>
</template><style scoped>
.blog-home {color: #fff;font-size: 24px;background-color: chartreuse;
}
</style>
 
 
创建路由规则数组并使用：import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'// TODO 创建路由规则数组
const routes = [{path: '/home',name: 'home',component: () => import('@/views/HomeVue.vue')},{path: '/blog',name: 'blog',component: () => import('@/views/BlogHomeVue.vue')}
]// TODO 创建路由
const router = createRouter({// TODO 规定路由模式history: createWebHistory(),routes
})export default router
 
 
1.4 声明路由链接(RouterLink) 和 路由出口(RouterView) 
在组件模块中声明路由链接和占位符： <router-link></router-link>：路由链接，to 属性则为点击此元素，需要切换的路由地址； 🔺 注意： 如果需要配合激活类名使用，需要使用 active-class 进行指定；
 <router-link to="路径" active-class="类名" > xxx </router-link>
 
 
<router-view />：路由占位符（Vue2中的路由出口），路由切换的视图展示的位置；
 
示例代码： App.vue：（此处有可能URL地址中仍然带有#号，需要重启项目）<script setup>
import { ref, reactive, computed, onMounted } from 'vue'onMounted(() => {});
</script><template>
<!-- 路由链接，点击是路由地址会切换到属性 to 的地方 --><router-link to="/home">首页</router-link> | <router-link to="/blog">博客</router-link><hr><!-- 路由试图，路由切换组件展示的地方，路由出口 --><router-view />
</template>
 
 
最终运行展示：
 