vue-router巢狀命名檢視
/settings/emails /settings/profile +-----------------------------------+ +------------------------------+ | UserSettings | | UserSettings | | +-----+-------------------------+ | | +-----+--------------------+ | | | Nav | UserEmailsSubscriptions | | +------------> | | Nav | UserProfile | | | | +-------------------------+ | | | +--------------------+ | | | | | | | | | UserProfilePreview | | | +-----+-------------------------+ | | +-----+--------------------+ | +-----------------------------------+ +------------------------------+
Nav
只是一個常規元件。UserSettings
是一個檢視元件。UserEmailsSubscriptions
、UserProfile
、UserProfilePreview
是巢狀的檢視元件。
注意:我們先忘記 HTML/CSS 具體的佈局的樣子,只專注在用到的元件上
UserSettings
元件的 <template>
部分應該是類似下面的這段程式碼:
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>巢狀命名檢視</h1> <router-view></router-view> </div>
const UserSettingsNav = { template:'<div class="us__nav"><router-link to="/settings/emails">郵箱</router-link><br><router-link to="/settings/profile">介紹</router-link></div>' } const UserSettings = { template:'<div class="us"><h2>使用者設定</h2><UserSettingsNav/><router-view class ="us__content"/><router-view name="helper" class="us__content us__content--helper"/></div>', components: { UserSettingsNav } } const UserEmailsSubscriptions = { template:'<div><h3>電子郵件訂閱</h3></div>' } const UserProfile = { template:'<div><h3>編輯您的個人資料</h3></div>' } const UserProfilePreview = { template:'<div><h3>預覽您的個人資料</h3></div>' } const router = new VueRouter({ mode: 'history', routes: [ { path: '/settings', // 您還可以在Top-PoT上擁有命名檢視。 component: UserSettings, children: [{ path: 'emails', component: UserEmailsSubscriptions }, { path: 'profile', components: { default: UserProfile, helper: UserProfilePreview } }] } ] }) router.push('/settings/emails') new Vue({ router, el: '#app' })
.us {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto;
grid-template-areas:
"header header"
"nav content"
"nav helper"
;
}
h2 {
grid-area: header;
}
.us__nav {
grid-area: nav;
border: 1px dotted;
margin-right: .75rem;
padding: .3rem;
}
.us__content {
grid-area: content;
}
.us__content--helper {
grid-area: helper;
}
相關推薦
vue-router巢狀命名檢視
/settings/emails /settings/profile +-----------------------------------+ +---------
vue-router巢狀+檢視路由
一、巢狀路由(配置好父路由component後,在父路由下面新增children屬性來配置這個父路由的子路由) 需要注意的是:父元件中的<router-view></router-view>是子元件的佔位符是必不可少的 巢狀路由的現象:點選了路由跳
vue—router巢狀路由設定及預設選擇
巢狀路由 應用場景:用vue-router 設定一個頁面的路由的時候,在其頁面元件內也需要用到,用一個專案來舉例子 我在app.vue中設定路由出口對其他頁面元件.設定路徑,比如home 首頁設定,在router資料夾index.js中設定 routes: [ { path:
vue2.0子路由配置和跳轉 vue-router: 巢狀路由
路由跳轉 <li class="nav_li" v-link="{ path: '/home/reg'}"></li> <router-link to="/home/reg">註冊</router-link> this.
Vue-router巢狀路由的使用
路由使用的時候需要設定路由的路徑: ew Router({ // mode: 'abstract', routes: [ { path: '/top', component: Top }, { path: '/new', component: New
vue-router巢狀路由定向問題
存在這樣一個路由routes: [ { path: '/home', name: 'home', component: Nav, children: [ { path: 'index'
vue router-view 多個檢視巢狀 和 命名router-view
多個router-view檢視巢狀: 1,除了app.vue中的router-view之外,還有其他的巢狀在router-view中的router-view檢視,子路由寫在router.js children中 app.vue <template> <div i
angularJs模組ui-router之狀態巢狀和檢視巢狀
狀態巢狀的方法 狀態可以相互巢狀。有三個巢狀的方法: 使用“點標記法”,例如:.state('contacts.list', {})使用parent屬性,指定一個父狀態的名稱字串,例如:parent: 'contacts'使用parent屬性,指定一個父狀態物件,例如
2、Angular-Ui Router 巢狀狀態和巢狀檢視
Methods for Nesting States巢狀狀態的方法States can be nested within each other. There are several ways of nesting states:狀態可以相互巢狀,巢狀狀態有幾種方法:Using
vue中巢狀頁面 iframe 標籤
vue中巢狀iframe,將要巢狀的檔案放在static下面: <iframe src="../../../static/bear.html" width="300" height="300" frameborder="0" scrolling="auto"></ifr
vue表格巢狀內容展開收起
<table class="tab-left table tab-zn"> <thead> <tr&g
Vue路由巢狀
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="vi
AngularJS ui-router (巢狀路由)
我們都知道,如果使用原生路由的話,Angular的檢視是通過ng-view這個指令進行載入的。比如這樣:<div ng-view></div>。一般,我們都會把這個指令放在index.html這個檔案裡面,然後,通過控制器來載入相應的模板檢視。比
vue元件巢狀迴圈報錯 provide name option
問題原因: 巢狀的元件沒有例項化完成 解決方法: 在專案初始化也就是在main.js中引入該元件 main.js import Vue from 'vue'; import Element from url; Vue.component('elementName', Element);
Vue系列之 => 命名檢視實現經典佈局
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=de
vue中巢狀頁面(iframe)
vue中巢狀iframe,將要巢狀的檔案放在static下面。src可以使用相對路徑,也可使用伺服器根路徑http:localhost:8088/… <iframe src="../../static/plusPro.html" width="1200"
vue路由巢狀,配置children巢狀路由
巢狀路由就是路由裡面巢狀他的子路由,可以有自己的路由導航和路由容器(router-link、router-view),通過配置children可實現多層巢狀 //mine元件 <template
vue路由介紹,命名路由,巢狀路由,命名檢視
路由,對於大多數單頁面應用,都推薦使用官方支援的 vue-router 庫。更多細節可以看 vue-router 文件https://router.vuejs.org/。以下為簡單實現路由的程式碼: 寫html <div class="tab-item"&g
vue-router菜鳥進階!(巢狀路由VS命名路由)
巢狀路由 一個被渲染元件可以包含自己的巢狀< router-view >。 要在巢狀的出口中渲染元件,需要在VueRouter的引數中使用children配置: <script src="https://unpkg.com/vue/dis
Vue router 命名檢視 命名路由
命名路由 <template> <div> 這是商品列表頁面 <router-link v-bind:to="{name: 'cart', params: {cartId: '123'}}">跳轉到購物車頁面</route