vue 命名視圖

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

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

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

兩個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
  }
}

]
})
當在瀏覽器窗口訪問我們的命名視圖時候

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106727.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

hover_lew 2019-08-21 16:26 評論0 收藏0