开发外包网站,广西住房和城乡建设门户网站,wordpress文章列表格子,黑帽seo工具目录 1 什么是路由2 如何设置路由2.1 安装依赖2.2 创建路由文件2.3 创建首页2.4 编写HomePage2.5 更新路由配置2.6 让路由生效 3 测试总结 要想使用vue实现页面的灵活跳转#xff0c;其中路由配置是必不可少的#xff0c;我们在做开发的时候#xff0c;先需要了解知识点其中路由配置是必不可少的我们在做开发的时候先需要了解知识点知道他具体是起什么作用。然后需要知道在程序中如何配置。 1 什么是路由 路由起什么作用 路由在前端开发中起到了非常重要的作用。它主要用于管理浏览器 URL 和应用程序之间的映射关系实现页面之间的导航和切换。
具体来说路由的作用包括
导航通过路由用户可以在不同的页面之间进行导航。当用户点击链接或按钮时路由会根据配置的规则将用户导航到相应的页面从而实现页面之间的切换。这样用户就可以在应用程序中浏览不同的内容和功能。URL 映射路由将特定的 URL 映射到对应的组件或页面。通过定义不同的路由规则可以使得不同的 URL 对应到不同的视图从而实现动态的页面渲染。参数传递路由可以接收和传递参数可以将参数作为 URL 的一部分或者通过查询字符串传递。这使得我们可以在不同页面之间传递数据从而实现更复杂的功能。嵌套路由路由可以支持嵌套结构即在一个页面中再嵌套其他页面。这样可以实现更复杂的页面布局和组件组合。路由守卫路由还提供了一些钩子函数用于在路由切换时执行特定的逻辑。通过路由守卫我们可以实现权限验证、页面拦截、数据加载等功能。
总而言之路由在前端开发中起到了连接不同页面和组件、实现导航和切换、传递参数和控制页面逻辑等重要作用。它使得前端应用程序具备了更好的交互性和可扩展性。
2 如何设置路由
2.1 安装依赖
首先需要按照对应的包用vscode打开我们的工程打开Terminal输入输入命令
npm install vue-routernext --save2.2 创建路由文件
在src目录下新建一个router文件夹里边创建一个index.js文件 路由的基本配置结构如下
const routes [{path: /,component: Home},{path: /about,component: About}];const router createRouter({history: createWebHistory(),routes});我们日常需要配置的就是routes可以根据我们的路径来配置具体的组件
2.3 创建首页
我们这里先配置一个首页当访问http://localhost:8080时希望展示首页。页面我们统一放在views文件夹下eslint要求页面的名称是两个单词我们先在src文件夹下创建views文件夹然后在views文件夹下创建HomePage.vue文件 在开发中我们常常借助插件来提效安装一个插件来帮我们自动生成代码模板点击侧边栏导航的插件图标 输入插件名称Vue 3 Snippets点击Install
2.4 编写HomePage
在HomePage.vue输入如下代码
templatediv classhome-pageh1Welcome to the Home Page/h1!-- Add your content here --/div/templatescriptexport default({name: HomePage,// Add your component options here});/scriptstyle scoped/* Add your component styles here *//style2.5 更新路由配置
页面完成了之后更新一下路由配置
import { createRouter, createWebHistory } from vue-router;
import HomePage from /views/HomePage.vue;
const routes [{path: /,component: HomePage}];const router createRouter({history: createWebHistory(),routes});export default router;2.6 让路由生效
路由配置写好之后需要修改main.js使用我们的路由
import { createApp } from vue
import ElementPlus from element-plus
import element-plus/dist/index.css
import App from ./App.vue
import router from ./router/index.js;
const app createApp(App)app.use(ElementPlus)
app.use(router);
app.mount(#app)
然后修改App.vue使用router-view来刷新我们的页面
templatediv idapprouter-view/router-view/div
/templatescriptexport default {name: App
}
/scriptstyle scoped/style
3 测试
在Terminal里输入
npm run serve然后访问我们的首页看是否可以正常看到首页
总结
我们本篇介绍了vue的路由的概念讲解了如何配置路由设置首页让URL访问的时候引导到首页上照着教程练习一下吧。
