黑龙江省网站建设_网站建设公司_内容更新_seo优化

什么是路由

定义：路由就是根据不同的URL地址展示不同的内容或页面
通俗理解：路由就像是一个地图，我们要去不同的地方，需要通过不同的路线进行导航

路由的作用

单页应用程序（SPA）中，路由可以实现不同视图之间的无刷新切换，提升用户体验；
路由还可以实现页面的认证和权限控制，保护用户的隐私和安全；
路由还可以利用浏览器的前进与后退，帮助用户更好地回到之前访问过的页面。

路由的基本使用

安装依赖

准备切换的vue

创建router.js

// 导入创建路由对象需要使用的函数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}]})// 向外暴露routerexport default router

修改main.js

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

<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中也可以放

运行