vue自定义标签和单页面多路由的实现代码
2020-05-04 07:10
796 查看
1. 自定义组件标签(如在主页插入顶栏/侧边栏等)
比如说要将Header.vue
插入Home.vue
中显示:定义好Header.vue
,然后在Home.vue
的script中导入Header.vue
:
import vHead from "./Header.vue"; #导入Header.vue为vHead,注意路径, Header.vue和Home.vue 在同一路径下用./
然后导出组件:
export default { components: { vHead, } };
然后即可在Home.vue
的<template>
中直接插入使用了:
<vHead></vHead>
2. 单页面多路由实现
单页面多路由就是在同一页面上显示不同路由的内容,通过设置为子路由的方式,然后通过<router-view></router-view>
,作为子路由的插入点。访问对应路由时候,会将该路由内容渲染到<router-view></router-view>位置。
比如:要在Home.vue
页面上显示HomeDesk.vue
等页面:
1.通过设置./router/index.js
路由中的children
属性,设置HomeDesk.vue为Home.vue的子路由:
const routes = [ { path: '/', name: 'home', component: () => import('../components/common/Home.vue'), #注意引用路径 children: [ { path: '/homedesk', name: 'homedesk', component: () => import('../components/page/HomeDesk.vue') #注意引用路径 },}]
2.在HomeDesk.vue
页面相应位置添加<router-view></router-view>
,访问对应路由/homedesk
时,即会将该路由内容渲染到HomeDesk.vue
对应位置。
到此这篇关于vue自定义标签和单页面多路由实现的文章就介绍到这了,更多相关vue 自定义标签单页面多路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- vue-cli实现多页面多路由的示例代码
- 【Vue】实现单页面多路由(一个页面里面存在多个router-view标签)
- JSTL标签急速秒杀jsp页面中的java代码---自定义函数
- vue实现添加标签demo示例代码
- 这是我们项目中的分页代码,是用JSTL + 自定义标签文件 + JAVABEAN实现的
- Vue-router中beforeEach钩子函数实现路由拦截,判断用户权限跳转至登录页面。
- 当显示的页面内容太长时,需要省略号代替时,通过自定义标签来实现方法
- vue-cli脚手架,实现单页面路由
- Vue项目路由刷新的实现代码
- vue-router实现webApp切换页面动画效果代码
- 不使用a标签,实现点击跳转到其他页面的代码
- vue-router实现单页面路由原理
- Vue模拟数据,实现路由进入商品详情页面的示例
- vue使用原生js实现滚动页面跟踪导航高亮的示例代码
- vue 自动化路由实现代码
- Vue 页面跳转不用router-link的实现代码
- jsp标签实现页面与代码分离
- 通过自定义标签,实现 页面 按钮显示控制
- jsp版本2.1 servlet版本2.5 el表达式、jstl标签学习以及自定义标签(用标签实现业务逻辑和jsp页面的分离)
- 用 vue-router 实现 tab 标签页(单页面)