网站描述范例,WordPress查询登录记录,内蒙古建设厅官方网站,网站设计培训课程#x1f497;#x1f497;#x1f497;欢迎来到我的博客#xff0c;你将找到有关如何使用技术解决问题的文章#xff0c;也会找到某个技术的学习路线。无论你是何种职业#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章#xff0c;也欢… 欢迎来到我的博客你将找到有关如何使用技术解决问题的文章也会找到某个技术的学习路线。无论你是何种职业我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临让我们一起踏上这个知识之旅 文章目录 什么是路由介绍Vue3中的路由创建路由总结 什么是路由
网络的角度 网络中的路由在网络中路由是指确定数据包从源到目的地的路径的过程。路由器是负责执行这一过程的设备它们根据网络中的路由表来选择最佳路径将数据包传输到目的地。网络中的路由是指网络数据包的传输路径选择 Vue3的角度 在Vue.js中路由是指管理应用程序中不同页面之间导航的方式。Vue Router是Vue.js官方提供的路由管理器它允许您在单页应用程序SPA中定义路由然后根据用户的操作在不同的页面之间进行切换。Vue中的路由是指前端应用程序中页面之间的导航管理 介绍Vue3中的路由
在介绍本节的内容之前我们首先还是老样子准备好需要的代码准备好必要的html代码方便后面的操作这里我们写了三个a标签学过前端的都知道我这是要创建链接这就引出了路由和路径的关联
templatediv classapp!--导航区--h2 classtitle路由测试/h2div classnavigateullia href首页/a/lilia href娱乐/a/lilia href帮助/a/li/ul /div!--展示区--div classmain-contain敬请期待/div/div
/template
script langts setup nameAppimport person from ./components/person.vue/scriptstyle/* App */
.title {text-align: center;word-spacing: 5px;margin: 30px 0;height: 70px;line-height: 70px;background-image: linear-gradient(45deg, gray, white);border-radius: 10px;box-shadow: 0 0 2px;font-size: 30px;
}
.navigate {display: flex;justify-content: space-around;margin: 0 100px;
}
.navigate a {display: block;text-align: center;width: 90px;height: 40px;line-height: 40px;border-radius: 10px;background-color: gray;text-decoration: none;color: white;font-size: 18px;letter-spacing: 5px;
}
.navigate a.xiaozhupeiqi {background-color: #64967E;color: #ffc268;font-weight: 900;text-shadow: 0 0 1px black;font-family: 微软雅黑;
}
.main-content {margin: 0 auto;margin-top: 30px;border-radius: 10px;width: 90%;height: 400px;border: 1px solid;
}
/style接下来我们需要先安装一下路由器打开你的终端
npm i vue-router接下来我们就静静等着就好了 之后我们创建一个router文件夹在src下级同时创建一个文件index.ts 创建路由
上节我们已经安装好我们需要的vue-router接下来我们就需要导入了
import {createRouter} from vue-router第二步就是正式创建路由了path是路径component是模板
const router createRouter({routes:[{path:/home,component:Home},{path:/plays,component:Play},{path:/about,component:About},]
})但是我们还没有对应的模版所以我们需要在模版文件夹创建三个.vue文件 之后就是要引入要呈现的组件
import Home from /components/Home.vue
import Play from /components/Play.vue
import About from /components/About.vue最后我们就需要将路由暴漏出去以便在应用程序的其他地方可以引入并使用该实例
export default router如果粘贴代码的小伙伴会发现代码飘红这是因为Vue3在创建路由的时候要明确工作模式所以我们需要引入一下
import {createRouter,createWebHistory} from vue-router
const router createRouter({history:createWebHistory(), routes:[ {path:/home,component:Home},{path:/plays,component:Play},{path:/about,component:About},]
})最后我们需要在main.ts里面导入router并使用
import router from ./router
// 创建一个应用
const app createApp(App)
// 使用路由器
app.use(router)
// 挂载整个应用到app容器中
app.mount(#app)之后我们将Home、About、Play三个文件代码补全
templatediv classhomeimg src alt/div
/templatescript setup langts nameHome/scriptstyle scoped.home {display: flex;justify-content: center;align-items: center;height: 100%;}
/styletemplatediv classabouth2关于/h2/div
/templatescript setup langts nameAbout/scriptstyle scoped
.about {display: flex;justify-content: center;align-items: center;height: 100%;color: rgb(85, 84, 84);font-size: 18px;
}
/styletemplatediv classplaysullia href#篮球/a/lilia href#足球/a/lilia href#羽毛球/a/lilia href#乒乓球/a/li/ul/div
/templatescript setup langts nameplays/scriptstyle scoped
/* 娱乐 */
.news {padding: 0 20px;display: flex;justify-content: space-between;height: 100%;
}
.news ul {margin-top: 30px;list-style: none;padding-left: 10px;
}
.news lia {font-size: 18px;line-height: 40px;text-decoration: none;color: #64967E;text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {width: 70%;height: 90%;border: 1px solid;margin-top: 20px;border-radius: 10px;
}
/style现在到这里我们其实点击还是没有任何反应这是因为我们还没有在App.vue中呈现 我们需要在App.vue一个RouterView
import {RouterView} from vue-routerdiv classmain-contentRouterView/RouterView/div这样我们就可以显示了 但是我们这样是需要在地址栏修改路径如果点击首页而修改路径该怎么做这时候就需要我们引入RouterLink
完整代码如下
templatediv classapp!--导航区--h2 classtitle路由测试/h2div classnavigateRouterLink to/home active-classMT首页/RouterLinkRouterLink to/plays active-classMT娱乐/RouterLinkRouterLink to/about active-classMT关于/RouterLink /div!--展示区--div classmain-contentRouterView/RouterView/div/div
/template
script langts setup nameApp
import {RouterView,RouterLink} from vue-router
/scriptstyle/* App */.title {text-align: center;word-spacing: 5px;margin: 30px 0;height: 70px;line-height: 70px;background-image: linear-gradient(45deg, gray, white);border-radius: 10px;box-shadow: 0 0 2px;font-size: 30px;}.navigate {display: flex;justify-content: space-around;margin: 0 100px;}.navigate a {display: block;text-align: center;width: 90px;height: 40px;line-height: 40px;border-radius: 10px;background-color: gray;text-decoration: none;color: white;font-size: 18px;letter-spacing: 5px;}.navigate a.MT {background-color: #64967E;color: #ffc268;font-weight: 900;text-shadow: 0 0 1px black;font-family: 微软雅黑;}.main-content {margin: 0 auto;margin-top: 30px;border-radius: 10px;width: 90%;height: 400px;border: 1px solid;}
/style运行效果如下 总结 本节简单介绍了一下路由的基本切换下一节我们接着介绍~ 挑战与创造都是很痛苦的但是很充实。
