企业官网建设流程全解析

网站建设显示危险,没有域名怎么搭建网站,wordpress 内页打不开,高端定制网站建设公司什么是路由 定义#xff1a;路由就是根据不同的URL地址展示不同的内容或页面 通俗理解#xff1a;路由就像是一个地图#xff0c;我们要去不同的地方#xff0c;需要通过不同的路线进行导航 路由的作用 单页应用程序#xff08;SPA#xff09;中#xff0c;路由可以实现…什么是路由定义路由就是根据不同的URL地址展示不同的内容或页面通俗理解路由就像是一个地图我们要去不同的地方需要通过不同的路线进行导航路由的作用单页应用程序SPA中路由可以实现不同视图之间的无刷新切换提升用户体验路由还可以实现页面的认证和权限控制保护用户的隐私和安全路由还可以利用浏览器的前进与后退帮助用户更好地回到之前访问过的页面。路由的基本使用安装依赖准备切换的vue创建router.js// 导入创建路由对象需要使用的函数import{createRouter,createWebHashHistory}fromvue-router// 导入.vue组件import Home from../components/Home.vueimport List from../components/List.vueimport Update from../components/Update.vueimport Add from../components/Add.vue;// 创建一个路由对象const routercreateRouter({// 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.jsimport{createApp}fromvue// import ./style.cssimport App from./App.vue// 在整个App.vue中可以使用路由import router from./routers/router.jsconst appcreateApp(App)app.use(router)app.mount(#app)修改App.vuescript setup/scripttemplatedivApp开始的内容brrouter-link to/homehome页/router-linkbrrouter-link to/listlist页/router-linkbrrouter-link to/updateupdate页/router-linkbrrouter-link to/addadd页/router-linkbrhr!--该标签会被替换成具体的.vue--router-view/router-viewhrApp结束的内容/div/templatestyle scoped/stylerouter-link不仅仅可以放在router-view所在页面每个单独的.vue中也可以放运行