vue 命名視圖

ytwman 發(fā)布于2019-08-26 10:45 / 911人閱讀

摘要：在創(chuàng)建文件文件創(chuàng)建兩個(gè)兩個(gè)在當(dāng)在瀏覽器窗口訪問(wèn)我們的命名視圖時(shí)候和分別展示了對(duì)應(yīng)的組件總結(jié)命名視圖優(yōu)點(diǎn)在于一個(gè)頁(yè)面中相當(dāng)于多個(gè)窗口，這些窗口我們可以根據(jù)的不同來(lái)展示不同的視圖

在views 創(chuàng)建 UserProfile.vue UserProfilePreview.vue文件
app.vue文件創(chuàng)建兩個(gè)router-view :

兩個(gè)router-link
Home |
profile|

在router.js
import Vue from "vue"
import Router from "vue-router"
import Home from "./views/Home.vue"
import UserProfile from "./views/UserProfile.vue"
import UserProfilePreview from "./views/UserProfilePreview.vue"

Vue.use(Router)

export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [

{
  path: "/",
  name: "home",
  component: Home
},
{
  path: "/profile",
  name: "profile",
  components: {
    default: UserProfile,
    helper: UserProfilePreview
  }
}

]
})
當(dāng)在瀏覽器窗口訪問(wèn)我們的命名視圖時(shí)候

和分別展示了對(duì)應(yīng)的組件
總結(jié)：命名視圖優(yōu)點(diǎn)在于一個(gè)頁(yè)面中相當(dāng)于多個(gè)窗口，這些窗口我們可以根據(jù)
Home |
profile|的不同來(lái)展示不同的視圖

云服務(wù)器 GPU云服務(wù)器切換視圖視圖分割刷新視圖系統(tǒng)視圖

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/106727.html

相關(guān)文章

手把手教你學(xué)Vue-3(路由)

摘要：記得要通過(guò)配置參數(shù)注入路由，從而讓整個(gè)應(yīng)用都有路由功能動(dòng)態(tài)路由一個(gè)路徑參數(shù)使用冒號(hào)標(biāo)記。當(dāng)匹配到一個(gè)路由時(shí)，參數(shù)值會(huì)被設(shè)置到，可以在每個(gè)組件內(nèi)使用。 1.路由的作用 1.當(dāng)我們有多個(gè)頁(yè)面的時(shí)候，我們需要使用路由，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。簡(jiǎn)單的路由 const routes = [ { path: ...

SolomonXie 2019-08-02 16:02 評(píng)論0 收藏0
手把手教你學(xué)Vue-3(路由)

摘要：記得要通過(guò)配置參數(shù)注入路由，從而讓整個(gè)應(yīng)用都有路由功能動(dòng)態(tài)路由一個(gè)路徑參數(shù)使用冒號(hào)標(biāo)記。當(dāng)匹配到一個(gè)路由時(shí)，參數(shù)值會(huì)被設(shè)置到，可以在每個(gè)組件內(nèi)使用。 1.路由的作用 1.當(dāng)我們有多個(gè)頁(yè)面的時(shí)候，我們需要使用路由，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。簡(jiǎn)單的路由 const routes = [ { path: ...

Prasanta 2019-08-30 14:17 評(píng)論0 收藏0
手把手教你學(xué)Vue-3(路由)

摘要：記得要通過(guò)配置參數(shù)注入路由，從而讓整個(gè)應(yīng)用都有路由功能動(dòng)態(tài)路由一個(gè)路徑參數(shù)使用冒號(hào)標(biāo)記。當(dāng)匹配到一個(gè)路由時(shí)，參數(shù)值會(huì)被設(shè)置到，可以在每個(gè)組件內(nèi)使用。 1.路由的作用 1.當(dāng)我們有多個(gè)頁(yè)面的時(shí)候，我們需要使用路由，將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們。簡(jiǎn)單的路由 const routes = [ { path: ...

laznrbfe 2019-08-22 15:50 評(píng)論0 收藏0
Vue-router(vue路由基礎(chǔ)詳解)

摘要：你可以在創(chuàng)建實(shí)例的時(shí)候，在配置中給某個(gè)路由設(shè)置名稱。如果沒(méi)有設(shè)置名字，那么默認(rèn)為。 Vue.js路由(Vue-router) 安裝直接引入 vue-router下載鏈接https://unpkg.com/vue-router/... npm下載 npm install vue-router 如果在一個(gè)模塊化工程中使用它，必須要通過(guò) Vue.use() 明確地安裝路由功能：在你的文...

JasinYip 2019-08-21 16:26 評(píng)論0 收藏0
Vue-Router（vue路由）

摘要：你可以使用注冊(cè)一個(gè)全局的鉤子鉤子函數(shù)的三個(gè)參數(shù)即將要進(jìn)入的目標(biāo)路由對(duì)象當(dāng)前導(dǎo)航正要離開(kāi)的路由一定要調(diào)用該方法來(lái)這個(gè)鉤子。 Vue-router（路由）在web開(kāi)發(fā)中，router是指根據(jù)url分配到對(duì)應(yīng)的處理程序 CDN引入： //vue //vue-router NPM安裝 npm install vue-router 開(kāi)始使用在使用Vue.js的時(shí)候，我們通過(guò)組合組件來(lái)組...

hover_lew 2019-08-21 16:26 評(píng)論0 收藏0