第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

Vue單頁面應(yīng)用怎么加個(gè)別的頁面?

Vue單頁面應(yīng)用怎么加個(gè)別的頁面?

忽然笑 2018-07-04 10:21:21
本來項(xiàng)目需求是單頁面，就做了公共的框架，包括側(cè)邊欄和頂部導(dǎo)航。后來又說要把登錄注冊集成進(jìn)去。所以想問一下，怎么在同一個(gè)域名下加一個(gè)新頁面。我現(xiàn)在的項(xiàng)目結(jié)構(gòu)是 側(cè)邊欄和頂部導(dǎo)航公共部分寫在app.vue里然后在app.vue里用<router-view/> 配合vue-router的@click=router.push()進(jìn)行局部刷新的頁面切換。現(xiàn)在需要把登錄注冊加進(jìn)去，是單獨(dú)的頁面不需要公共部分。不知道怎么做了。登錄注冊可以是.html的也可以是.vue的，尋求一下幫助。
查看完整描述

2 回答

?
喵喵時(shí)光機(jī)

TA貢獻(xiàn)1846條經(jīng)驗(yàn) 獲得超7個(gè)贊

路由就能完美解決啊。
層級(jí):
app.vue是程序的頂級(jí)出口(router-view)：1.login 2.home(主頁面)
主頁面里面包含:2.1側(cè)邊欄 2.2頂部導(dǎo)航 2.3右側(cè)渲染區(qū)域出口(router-view)。
右側(cè)渲染區(qū)域出口:2.3.X 要展示的頁面
https://img1.sycdn.imooc.com//5b4469a2000197b608000457.jpg

//基礎(chǔ)路由
import Home from '主頁面路徑'
import Login from '登錄頁面路徑'

//懶加載路由
const Welcome = resolve => require(['展示頁面路徑'], resolve)

routes:[

{    path:'/login'
    name:'登錄頁面',    component:Login,
},
{    path:'/',    name:'主頁',    component:'Home',    redirect: '/welcome',    children: [
        { path: '/welcome', component: Welcome, name: '歡迎'}
    ]
}

]


查看完整回答
1 反對 回復(fù) 2018-07-10
?
慕勒3428872

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超6個(gè)贊

使用嵌套路由

//router.js

  routes: [

    {

      path: '/index',

      name: 'index',

      component: Index,

      children:[

          {

              path:'page1'

              name: 'page1',

              component: Page1,

          },

          {

              path:'page2'

              name: 'page2',

              component: Page2,

          },

      ]

    },

    {

        path: '/login',

        name: 'login',

        component: Login,

    }

  ]

//app.vue

<template>

  <div id="app">

    <router-view />

  </div>

</template>

//index.vue

<template>

  <div id="index">

    <navigator />

    <sidebar />

    <router-view />

  </div>

</template>


查看完整回答
1 反對 回復(fù) 2018-07-10
  • 2 回答
  • 0 關(guān)注
  • 1261 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)