首页 >> js开发 >> jsvue自定义标签和单页面多路由的实现代码js大全
jsvue自定义标签和单页面多路由的实现代码js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
1. 自定义组件标签(如在主页插入顶栏/侧边栏等)
比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue:Header.vueHome.vueHeader.vueHome.vuescriptscriptHeader.vue
import vHead from "./Header.vue";
#导入Header.vue为vHead,注意路径,
Header.vue和Home.vue
在同一路径下用./
import vHead from "./Header.vue";
#导入Header.vue为vHead,注意路径,
Header.vue和Home.vue
在同一路径下用./然后导出组件:
export default {
components: {
vHead,
}
};
export default {
components: {
vHead,
}
};然后即可在Home.vue的中直接插入使用了:Home.vue 2. 单页面多路由实现
单页面多路由就是在同一页面上显示不同路由的内容,通过设置为子路由的方式,然后通过 ,作为子路由的插入点。访问对应路由时候,会将该路由内容渲染到 位置。子路由 比如:要在Home.vue页面上显示HomeDesk.vue等页面:Home.vueHomeDesk.vue1.通过设置./router/index.js路由中的children属性,设置HomeDesk.vue为Home.vue的子路由:./router/index.jschildren子路由
const routes = [
{
path: '/',
name: 'home',
component: () => import('../components/common/Home.vue'), #注意引用路径
children: [
{
path: '/homedesk',
name: 'homedesk',
component: () => import('../components/page/HomeDesk.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页面相应位置添加 ,访问对应路由/homedesk时,即会将该路由内容渲染到HomeDesk.vue对应位置。HomeDesk.vue /homedeskHomeDesk.vue
比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue:Header.vueHome.vueHeader.vueHome.vuescriptscriptHeader.vue
import vHead from "./Header.vue";
#导入Header.vue为vHead,注意路径,
Header.vue和Home.vue
在同一路径下用./
import vHead from "./Header.vue";
#导入Header.vue为vHead,注意路径,
Header.vue和Home.vue
在同一路径下用./然后导出组件:
export default {
components: {
vHead,
}
};
export default {
components: {
vHead,
}
};然后即可在Home.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') #注意引用路径
},}]
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页面相应位置添加
相关文章:
- jsvue data对象重新赋值无效(未更改)的解决方式js大全
- jsJS使用Chrome浏览器实现调试线上代码js大全
- jsVue自动构建发布脚本的方法示例js大全
- js代码javascript递归函数定义和用法示例分析
- jsvue在响应头response中获取自定义headers操作js大全
- jsvue中全局路由守卫中替代this操作(this.$store/this.$vux)js大全
- js解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题js大全
- JavaScript深入了解Vue.js 混入(mixins)
- js解决父组件将子组件作为弹窗调用只执行一次created的问题js大全
- js解决vuex数据页面刷新后初始化操作js大全