Vue enrutamiento anidada, guardia de enrutamiento

 

enrutamiento anidada

rutas anidadas: Ruta una configuración de otra configuración de enrutamiento anidada.

Anidado enrutamiento muy común, tales como barras de navegación tienen hogar, artículos, ideas, comentarios, cuatro módulos, integramos estos módulos en forma de una ruta anidada, haga clic en la entrada correspondiente en la barra de navegación, que serán enviados a la página correspondiente ( de abajo muestra las páginas correspondientes), y los resultados similares html <iframe>.

 

 

demostración de enrutamiento anidada

<! DOCTYPE html > 
< html > 
    < cabeza > 
        < meta charset = "UTF-8"  /> 
        < titulo > </ titulo > 
        <! - 引入vue.js -> 
        < script de src = "js / vue.js" > </ escritura >  
        <! - 引入路由插件-> 
        < script de src = "js / vue-router.js" > </ script de > 
    </ cabeza > 
    < cuerpo > 
        
    <div > 
    
    < secuencia de comandos > 
        // 导航
        var Nav = { 
            Plantilla: ` 
                < div > 
                    < enrutador - enlace: a = " {nombre: 'nav.index'} " > 首页< / enrutador-link> 
                    < enrutador - enlace: a = " {nombre: 'nav.article'} " > 文章< / enrutador-link> 
                    < enrutador - enlace: a = " {nombre: 'nav.idea'} " >Ideas < / Router-Link> 
                    < Router - Enlace: a = " {nombre: 'nav.message'} " > mensaje < / Router-Link> 
                    < Router - Ver > < / Router-View> <- fosa izquierda! , al hacer clic en los enlaces de enrutamiento 4, se muestra aquí la página correspondiente -> 
                < / div> 
            `, 
        } 
        
        // primero 
        var Índice = { 
            Plantilla:` 
                < div > 
                    < P > esto es parte Inicio < / P> 
                </div> 
            `, 
        } 
        
        // artículo 
        var Article = { 
            Plantilla:` 
                < div > 
                    < P > Esta es la parte del artículo < / P> 
                < / div> 
            `, 
        } 
        
        // idea 
        var Idea = { 
            Plantilla:` 
                < div > 
                    < el p > esto es parte de la idea < / p> 
                < / div> 
            `, 
        } 
            
        // mensaje
        var el Mensaje = { 
            Plantilla: ` 
                < div > 
                    < P > Esta es una parte de mensaje < / P> 
                < / div> 
            `, 
        } 
            
            
        // instalación ruta widget de 
        Vue.use (VueRouter); 
            
        // Crear enrutamiento objeto 
        var Router = nuevo nuevo VueRouter ({
             // configurar el enrutamiento de reglas 
            rutas: [ 
                {ruta: ' / ' , nombre: ' NAV ' , Componente: Nav, Niños: [    @camino trazado directamente a la raíz (la página actual html) inferior, dispuesta para nido ruta infantil, en forma de una matriz de objetos 
                    {path: ' / index ' , nombre: ' nav.index ' , Componente: Índice},   // anidado en el nombre de la ruta en general, están obligados a llevar la ruta externa del recipiente, para ver que la relación 
                    {ruta: ' / Article ' , nombre: ' nav.article ' , Componente: Article}, 
                    {ruta: ' / IDEA ' , nombre : ' nav.idea ' , Componente: Idea}, 
                    {ruta: ' / Mensaje ' , nombre: ' nav.message ', El componente: el mensaje}, 
                    {ruta: '' , nombre: ' nav.index ' , el componente: Índice},   // hacer clic en el enlace se nav ruta correspondiente a una página específica, le damos una página de configuración de ruta por defecto , ruta: '' 
                ]}, 
            ] 
        }); 
            
        nuevo nuevo Vue ({ 
            EL: ' #app ' , 
            router, usando enrutamiento // 
            Plantilla: ` 
                < div > 
                    < Router - Ver > < / Router-View> <! - trozos de pozo de navegación izquierda -> 
                < / div> 
            `, 
        }) 
    
    </ escritura>         
        
    </ Cuerpo > 
</ html >

 

 

ruta de enrutamiento Nested puede utilizar una ruta relativa, una ruta absoluta también se puede utilizar

    { Ruta: '/ NAV' , nombre: 'NAV', componente: Nav, los niños: [    
           { ruta: '/ index' , nombre: 'nav.index', componente: Índice} //绝对路径
    ]}

/ Representa la ruta raíz (página HTML actual). índice de camino de acceso es ..... html # / index

 

    { Path: '/ NAV' , nombre: 'NAV', Componente: Nav, Niños: [    
           { ruta: 'índice' , nombre: 'nav.index', componentes:} // Índice de ruta relativa con respecto a las rutas externas 
    ] }

índice de camino de acceso es .... html # / nav / index

 

 

 

 

 

guardia de enrutamiento

Enrutamiento de una página a otra página, antes de que la ruta se puede hacer algo de procesamiento de la página de destino, tales como la detección de inicio de sesión, las comprobaciones de permisos, no satisfecha no se encamina a la página de destino, información rápida.

 

demostración de guardia de enrutamiento

    // instalación ruta widget de 
    Vue.use (VueRouter); 
        
    // Crear objeto de enrutamiento 
    var Router = nueva nueva VueRouter ({
         // configurar el enrutamiento de reglas 
        rutas: [ 
             @ ..... 
        ] 
    }); 
        
    nuevo nuevo Vue ({ 
        EL: ' #app ' , 
        Plantilla: `
             <div> 
                <! - fosa izquierda -> <Router-View> </ Router-View> 
            </ div>         `, 
        Router, 
        datos () { retorno {
                 // .... ..             } 
        }, 
        montada () {

            

            router.beforeEach ((a, a partir de) => {// guardia de ruta. Utilice la flecha ES6 hacer algunos parámetros de la función de procesamiento antes de 0,2 encapsular la página de destino, la información en una página
                 // ...... 
            } ); 
        } 
        
    })

Enrutamiento de guardia en la página html escribir nuevos Vue (), generalmente escrito en el mouted () {} en.

En una página que desea pasar los datos a la página de destino, tales como nombre de usuario, UID, loginstate, ¿qué papel puede guardar los datos en los datos utilizando una serie de variables, registros de enrutamiento guardia detectado sobre la base de estos datos, la autoridad de detectar.

Cuando se realiza la mrouted (), los datos se ha montado, los datos pueden ser adquiridos, los datos de encaminamiento detectaron guardia puede conseguirlo.

beforeeach, como su nombre lo indica, cada vez que la ruta a la página de destino se detecta utilizando el guardia de enrutamiento.

 

Ahora una gran cantidad de aplicaciones son el modo de MVC, el controlador no bloqueador, filtro de lo que ha sido durante mucho tiempo el filtrado solicitud, la consulta de registro, comprobaciones de permisos se han hecho, no hay necesidad de re-uso en la vista aquí para filtrar guardia de enrutamiento.

Enrutamiento de guardia con muy poco, se puede entender.