动漫网站开发与建设,怎么做网站的百度收录,不备案网站怎么做推广,企业公司网站管理系统文章目录 前言一、使用Vue-Router1.安装2. 创建路由器实例3. 注册路由器插件4. 根组件 二、访问路由器1.理论2.使用3. 展示 三、嵌套路由(子路由)1. 准备文件2. 配置路由3. 菜单配置4. 展示 总结 前言
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成#xff0c;… 文章目录 前言一、使用Vue-Router1.安装2. 创建路由器实例3. 注册路由器插件4. 根组件 二、访问路由器1.理论2.使用3. 展示 三、嵌套路由(子路由)1. 准备文件2. 配置路由3. 菜单配置4. 展示 总结 前言
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成让用 Vue.js 构建单页应用变得轻而易举。功能包括
嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码 一、使用Vue-Router
1.安装
npm install vue-router42. 创建路由器实例
router.js
import { createWebHistory, createRouter } from vue-routerimport LoginView from /views/Login.vue
import HomeView from /views/Home.vueconst routes [{ path: /, component: HomeView },{ path: /login, component: LoginView }
]const router createRouter({history: createWebHistory(),routes,
})
export default router3. 注册路由器插件
main.js
import ./assets/main.scssimport { createApp } from vue
import App from ./App.vue
import ElementPlus from element-plus
import element-plus/dist/index.css
import router from ./router/router.jsconst app createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount(#app)
和大多数的 Vue 插件一样use() 需要在 mount() 之前调用。
如果你好奇这个插件做了什么它的职责包括
全局注册 RouterView 和 RouterLink 组件。添加全局 $router 和 $route 属性。启用 useRouter() 和 useRoute() 组合式函数。触发路由器解析初始路由。
4. 根组件
App.vue
script setup/scripttemplatemainRouterView //main
/templatestyle scoped/style
二、访问路由器 这里演示场景为登录成功后通过路由从登录界面跳转到首页。 1.理论
Vue Router 可以使用组合式 API 或选项式 API 。 在本教程中我们常常以 router 作为路由器实例提及。即由 createRouter() 返回的对象。在应用中访问该对象的方式取决于上下文。例如在组合式 API 中它可以通过调用 useRouter() 来访问。在选项式 API 中它可以通过 this.$router 来访问。 类似地当前路由会以 route 被提及。基于不同 API 风格的组件它可以通过 useRoute() 或 this.$route 来访问。 2.使用
import { useRoute, useRouter } from vue-routerconst loginFormRef ref(null)
const router useRouter()
const loginUser async () {let result await loginService(registerData.value)let message result.messageif (result.code 0) {ElMessage.success(message ? message : 登录成功!)//this.$router.push(/)//选项式router.push(/)//组合式} else {ElMessage.error(message ? message : 登录失败!)}
}3. 展示 三、嵌套路由(子路由) 一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下URL 的片段通常对应于特定的嵌套组件结构例如 /user/johnny/profile /user/johnny/posts
------------------ -----------------
| User | | User |
| -------------- | | ------------- |
| | Profile | | ------------ | | Posts | |
| | | | | | | |
| -------------- | | ------------- |
------------------ -----------------1. 准备文件 2. 配置路由
import { createWebHistory, createRouter } from vue-routerimport LoginView from /views/Login.vue
import HomeView from /views/Home.vue
import ArticleCategoryView from /views/article/ArticleCategory.vue
import ArticleManageView from /views/article/ArticleManage.vue
import UserAvatarView from /views/user/UserAvatar.vue
import UserInfoView from /views/user/UserInfo.vue
import UserResetPasswordView from /views/user/UserResetPassword.vueconst routes [{ path: /login, component: LoginView },{ path: /, component: HomeView,children:[{ path: /article/category, component: ArticleCategoryView },{ path: /article/manage, component: ArticleManageView },{ path: /user/avatar, component: UserAvatarView },{ path: /user/info, component: UserInfoView},{ path: /user/resetpassword, component: UserResetPasswordView},]}]const router createRouter({history: createWebHistory(),routes,
})
export default router3. 菜单配置
el-menu active-text-color#ffd04b background-color#232323 text-color#fff routerel-menu-item index/article/categoryel-iconManagement //el-iconspan文章分类/span/el-menu-itemel-menu-item index/article/manageel-iconPromotion //el-iconspan文章管理/span/el-menu-itemel-sub-menutemplate #titleel-iconUserFilled //el-iconspan个人中心/span/templateel-menu-item index/user/avatarel-iconUser //el-iconspan基本资料/span/el-menu-itemel-menu-item index/user/infoel-iconCrop //el-iconspan更换头像/span/el-menu-itemel-menu-item index/user/resetpasswordel-iconEditPen //el-iconspan重置密码/span/el-menu-item/el-sub-menu
/el-menu4. 展示 总结
回到顶部 官方网站
