routage Vue imbriquée, garde de routage

 

routage emboîtée

routes emboîtés: Route une configuration imbriquée autre configuration de routage.

Emboîtés de routage très commun, tels que les barres de navigation sont devenus indépendants, des articles, des idées, des commentaires, des quatre modules, nous intégrons ces modules sous la forme d'un itinéraire imbriquée, cliquez sur l'entrée correspondante dans la barre de navigation, ils seront acheminés vers la page correspondante ( ci-dessous affiche les pages correspondantes), et les balises HTML <iframe> résultats similaires.

 

 

Démo du routage emboîtée

<! DOCTYPE html > 
< html > 
    < tête > 
        < meta charset = "utf-8"  /> 
        < title > </ title > 
        <! - 引入vue.js -> 
        < scénario src = "/ js vue.js" > </ scénario >  
        <! - 引入路由插件-> 
        < scénario src = "/ js-vue router.js" > </ scripts > 
    </ tête > 
    < body > 
        
    <div > 
    
    < scénario > 
        // 导航
        var Nav = { 
            modèle: ` 
                < div > 
                    < routeur - lien: à = " {name: 'nav.index'} " > 首页< / routeur-link> 
                    < routeur - lien: à = " {name: 'nav.article'} " > 文章< / routeur-link> 
                    < routeur - lien: à = " {name: 'nav.idea'} " >Idées < / Router-Link> 
                    < Router - Lien: à = " {name: 'nav.message'} " > un message < / routeur-Link> 
                    < Router - Voir > < / routeur-View> <- pit gauche! , en cliquant sur les liens de routage 4, la page correspondante est affichée ici -> 
                < / div> 
            `, 
        } 
        
        // D' abord 
        var Index = { 
            Template:` 
                < div > 
                    < P > cela fait partie Accueil < / P> 
                </div> 
            `, 
        } 
        
        // article 
        var Article Cet article a été = { 
            Template:` 
                < div > 
                    < P > Ceci est la partie de l'article < / P> 
                < / div> 
            `, 
        } 
        
        // idée 
        var Idée = { 
            Modèle:` 
                < div > 
                    < P- > cela fait partie de l'idée < / p> 
                < / div> 
            `, 
        } 
            
        // un message
        var le message = { 
            Template: ` 
                < div > 
                    < P > Ceci est une partie de message < / P> 
                < / div> 
            `, 
        } 
            
            
        // itinéraire d'installation widget de 
        Vue.use (VueRouter); 
            
        // Créer un objet de routage 
        var Router = new new VueRouter ({
             // configure le routage règle 
            itinéraires: [ 
                {chemin: ' / ' , nom: ' NAV ' , composante: Nav, Enfants: [    @chemin mappé directement à la racine (la page html actuelle) inférieure, conçu pour nicher la route des enfants, sous la forme d'un tableau d'objets 
                    {chemin: « / index » , nom: « nav.index » , composant: Index},   // imbriqué au nom de la route sont généralement nécessaires pour amener le conteneur voie externe, pour voir que la relation 
                    {chemin: « / article Cet article a été » , le nom: « nav.article » , composant: article Cet article a été}, 
                    chemin {: « / IDEA » , nom : ' nav.idea ' , composant: Idée}, 
                    {chemin: ' / message ' , nom: ' nav.message ', Le composant: le message}, 
                    {chemin: « » , le nom: « nav.index » , le composant: Index},   // cliquer sur le lien suivant nav itinéraire correspondant à une page spécifique, nous lui donnons une page de configuration de routage par défaut , chemin: '' 
                ]}, 
            ] 
        }); 
            
        nouvelle nouvelle Vue ({ 
            EL: ' #app ' , 
            routeur, en utilisant le routage // 
            modèle: ` 
                < div > 
                    < Router - Voir > < / routeur-View> <! - gauche bits de puits de nav -> 
                < / div> 
            `, 
        }) 
    
    </ scripts>         
        
    </ Body > 
</ html >

 

 

chemin de routage imbriquée peut utiliser un chemin relatif, un chemin absolu peut aussi être utilisé

    { Chemin: '/ nav' , le nom: 'nav', composante: Nav, les enfants: [    
           { chemin: '/ index' , nom: 'nav.index', composant: Index} //绝对路径
    ]}

/ Représente le chemin racine (page html en cours). Indice de chemin d'accès est ..... html # / index

 

    { Chemin: '/ NAV' , le nom: 'NAV', composante: Nav, Enfants: [    
           { chemin: 'index' , nom: 'nav.index', composant:} // index chemin relatif par rapport aux voies externes 
    ] }

Indice de chemin d'accès est .... html # / nav / index

 

 

 

 

 

garde de routage

L'acheminement d'une page à une autre, avant que la route peut faire un traitement à la page cible, telles que la détection de connexion, les contrôles d'autorisation, non satisfait est pas dirigé vers la page de destination, des informations rapides.

 

garde démo routage

    // itinéraire d'installation widget de 
    Vue.use (VueRouter); 
        
    // Créer un objet de routage 
    var Router = new new VueRouter ({
         // Configurer le routage règle 
        itinéraires: [ 
             @ ..... 
        ] 
    }); 
        
    nouvelle nouvelle Vue ({ 
        EL: ' #app ' , 
        modèle: `
             <div> 
                <! - pit gauche -> <Router-View> </ routeur-View> 
            </ div>         `, 
        routeur, 
        données () { retour {
                 // .... ..             } 
        },

            
 
        monté () {
            router.beforeEach ((à, de) => {// itinéraire de garde. Utilisez la flèche ES6 faire certains paramètres de la fonction de traitement avant .2 encapsulent la page cible, les informations sur une page
                 // ...... 
            } ); 
        } 
        
    })

garde de routage dans la page html écrire un nouveau Vue (), généralement écrit dans le Mouted () {} dans.

Sur une page que vous voulez transmettre des données à la page cible, comme le nom d'utilisateur, uid, loginstate, quel rôle peut enregistrer les données dans les données en utilisant un certain nombre de variables, du journal de routage de garde détectée sur la base de ces données, l'autorité de détecter.

Lors de l'exécution du mrouted (), les données ont été montées, les données peuvent être obtenues, les données de routage détectées garde peut l'obtenir.

beforeeach, comme son nom l'indique, chaque fois que la route vers la page de destination sera détectée en utilisant la garde de routage.

 

Maintenant, beaucoup d'applications sont en mode mvc, contrôleur il bloqueur, filtre ce qui a longtemps été le filtrage de la demande, l'inspection du journal, les contrôles d'autorisation ont été fait, pas besoin de réutilisation en vue ici pour la garde de routage du filtre.

garde de routage avec très peu, vous pouvez comprendre.