2. 程式人生 > >uiRouter路由定義高效的父子級巢狀路由

uiRouter路由定義高效的父子級巢狀路由

阿新 • • 發佈：2019-01-27

在專案開發中會到這樣的需求，在導航中，有的點選需要在本頁面中切換，有的點選需要跳轉到其他頁面（比如點選登入、註冊等），ui-router為我們很方便的解決了這個問題，程式碼如下：

main.html中的程式碼：

01<!DOCTYPE html>
02<html lang="en">
03<head>
04<meta charset="UTF-8">
05<title>Document</title>
06</head>
07<body ng-app="app">
08<div ui-view></div>
09</body>
10</html>
13<script type="text/javascript">
14var m = angular.module('app', ['ui.router']);
15m.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
16$urlRouterProvider.otherwise('/index');
17$stateProvider.state('index', {
18url : '/index',
19templateUrl : 
'./index.html',
20controller : 'ctr1'
21})
22.state('index.news', {
23url : '/news',
24templateUrl : './news.html',
25controller : 'ctr2',
26})
27.state('login', {
28url : '/login',
29parent : 'index',
30templateUrl : './login.html',
31controller : 'ctr3'
32})
33}]);
34m.controller('ctr1', ['$scope', function($scope){
35$scope.name = 
'index.html';
36}]);
37m.controller('ctr2', ['$scope', function($scope){

相關推薦

uiRouter路由定義高效的父子級巢狀路由

在專案開發中會到這樣的需求，在導航中，有的點選需要在本頁面中切換，有的點選需要跳轉到其他頁面（比如點選登入、註冊等），ui-router為我們很方便的解決了這個問題，程式碼如下：main.html中的程式碼：01<!DOCTYPE html>02<html

06 . Vue路由簡介,原理,實現及巢狀路由,動態路由,程式設計式導航

#### 路由概念 > 路由的本質就是一種對應關係，比如說我們在url地址中輸入我們要訪問的url地址之後，瀏覽器要去請求這個url地址對應的資源。 > 那麼url地址和真實的資源之間就有一種對應的關係，就是路由。 `路由分為前端路由和後端路由` ```go /* 1).後端路由是由伺服器端進行實

Nuxt 巢狀路由nuxt-child元件（父子頁面元件的傳值）

Nuxt巢狀路由官網上的API詳解：點選連結 看了官網上的api實現了官網的案例你會發現訪問父頁面中只能顯示父頁面中的內容，要想預設的在<nuxt-child>區域顯示一個頁面內容怎麼辦？   自己案例程式碼： pages/parent.vue &

angular的uiRouter 巢狀路由學習總結

var contacts = { abstract:true, name:'parent', url:'/contacts', templateUrl:'contacts.html', controller:function($scope){ $sc

vue-router中定義動態路由、巢狀路由，並動態獲取引數

路由的定義，主要有以下幾步： 如果是模組化機制，需要呼叫 Vue.use(VueRouter) 定義路由元件，如： const Foo = { template: '<div>foo</div>' }; 定義路由（陣列）：

React學習之旅----配置多頁面路由及巢狀路由demo

const menuList = [ { title: '首頁', // key: '/home' key: '/admin/home' }, { title: 'UI', key: '/ui', children: [ {

vue—router巢狀路由設定及預設選擇

巢狀路由 應用場景：用vue-router 設定一個頁面的路由的時候，在其頁面元件內也需要用到，用一個專案來舉例子 我在app.vue中設定路由出口對其他頁面元件.設定路徑，比如home 首頁設定，在router資料夾index.js中設定 routes: [ { path:

4.2react-router實現巢狀路由

import {BrowserRouter, Route, Switch, Link}from 'react-router-dom'; class demo extends React.Component { render() { return (

vue巢狀路由-params傳遞引數（四）

在巢狀路由中，父路由向子路由傳值除了query外，還有params，params傳值有兩種情況，一種是值在url中顯示，另外一種是值不顯示在url中。 1、顯示在url中 index.html <div id="app">     <!-

vue巢狀路由-query傳遞引數（三）

在巢狀路由中我們經常會遇到父路由向子路由裡面傳遞引數，傳遞引數有兩種方法，通過 query 或者 params index.html <div id="app">     <!-- router-view 路由出口, 路由匹配到的元件將渲染在

vue巢狀路由（二）

在實際專案中我們會碰到多層巢狀的元件組合而成，但是我們如何實現巢狀路由呢？因此我們需要在 VueRouter 的引數中使用 children 配置，這樣就可以很好的實現路由巢狀。 index.html，只有一個路由出口 <div id="app">    &

Vue router 路由巢狀 路由重定向 路由別名 router-link傳引數

<template> <div> 這是商品列表頁面 <router-link :to="{ name: 'title'}">標題</router-link> <router-link to="/good

vue巢狀路由與404重定向實現方法分析

第一部分： vue巢狀路由 巢狀路由是什麼？ 巢狀路由就是在一個被路由過來的頁面下可以繼續使用路由，巢狀也就是路由中的路由的意思。 比如在vue中，我們如果不使用巢狀路由，那麼只有一個<router-view>，但是如果使用，那麼在一個元件中就還有<router-view>，這也就構

mybatis association巢狀association的兩級巢狀問題

今天遇到了一個雙表連線查詢以及自關聯的問題，由於第一次遇到，所以在這記下，日後好查閱 針對一個表的關聯屬性本身也有自關聯的情況下，可以用association巢狀association的方法來處理。 以下是程式碼： <select id="selectNewsLabels" resultM

VUE學習筆記(三)-子路由、多路由、巢狀路由、動態路由都是什麼鬼？

最近學習到VUE路由這塊，發現這塊知識點有點多，好容易混亂，我的學習習慣就是先要建立框架，然後再去挨個學習搞懂，所以先來把概念搞搞清楚再說。 首先，我們要知道VUE路由建立的是單頁面路由。 子路由其實和單路由意思是一樣的，單路由應該很好理解，因為我們都知道路由是可以一層一層巢狀的，你可以

vue——46-webpack打包vue-路由 和 巢狀路由

一、路由 main.js 中 1.引入 vue-router 包 安裝命名：cnpm i vue-router -s import Vue from 'vue'; import app from

巢狀路由中，子頁面中看見父頁面元素的解決辦法

之前父子路由的頁面巢狀都是照套路走的，像下面這樣： 一個巢狀路由 跳轉傳值的套路如下： 但是，出問題了！ 父頁面比子頁面長，一旦滾動，子頁面擋都擋不住呀！大概就像下面這樣： 這種情況當然是自己作的，解決辦法很簡單。 把父子頁面的總高度都設定為一個螢幕並不能滾動

vue路由介紹，命名路由，巢狀路由，命名檢視

路由，對於大多數單頁面應用，都推薦使用官方支援的 vue-router 庫。更多細節可以看 vue-router 文件https://router.vuejs.org/。以下為簡單實現路由的程式碼： 寫html       <div class="tab-item"&g

巢狀路由之間的傳值，go(-1)並同時傳參

巢狀路由子路由向父路由傳值方式就是父子元件之間的傳值方式，即使用emit。 如果是想看go(-1)的同時傳值，直接到文末 假設現在有路由如下： A是父路由，BC是子路由 { path: '/A', name: 'A', compone

react-router4中巢狀路由的寫法

因為本人也是react的初學者，也是在一遍摸索著一邊解決一些小的問題來分享出來，希望大家能共同交流。 接下來談一談react-router4中如何寫巢狀路由。因為在前幾篇部落格裡寫了用react-router實現單頁面跳轉，但是沒有測試巢狀路由，導致巢狀的部分無法實現正常跳轉，現已改正，並來說一