Enrutamiento de Vue (detallado)

Language 2023-08-22 23:38:49 views: null

Tabla de contenido

principio de enrutamiento

¿Qué hace exactamente el enrutamiento?

Instalación y uso de enrutamiento (vue2)

Salto de ruta

Ejemplo de salto:

Valor de paso y recuperación de rutas.

 Ejemplo de transferencia de valor:

La diferencia entre parámetros de consulta y parámetros de enrutamiento:

rutas anidadas

Instancia anidada:

guardia de ruta

Instancia de guardia:

principio de enrutamiento

El enrutamiento es un complemento importante en Vue.

Vue es una página HTML para una aplicación de una sola página, pero si queremos lograr el efecto de salto de página, entonces necesito usar enrutamiento.

¿Qué es un salto de una sola página? De hecho, es un cambio parcial, de hecho sigue siendo una sola página, pero parece un salto.

Hay dos modos de enrutamiento para aplicaciones de una sola página

1. Modo hash (use el evento hashchange para monitorear el cambio del hash de la URL)

2. Modo Historial (el uso de este modo requiere la cooperación del fondo para escribir todas las interfaces en nuestro index.html empaquetado)

¿Qué hace exactamente el enrutamiento?

Ejemplo de Taobao en la siguiente figura: si se hace clic en el botón en el cuadro rojo en la parte inferior, el contenido en el cuadro verde cambiará, realizando una aplicación de una sola página.

Instalación y uso de enrutamiento (vue2)

La dirección de descarga del enrutador se escribió en una publicación de blog; si no la ha descargado, puede consultarla.

Importar complemento de enrutamiento:

<script src="../js/vue2.7.js"></script><!--vue文件-->
<script src="../js/vue-router.js"></script><!--路由文件-->

Instale el complemento de enrutamiento en Vue:

<script>
    //安装路由，前提要导入路由js
    Vue.use(VueRouter)
</script>

Crea un objeto VueRouter:

var Login = Vue.extends({
    template:`
        <div>
        我是登录页面
        </div>
    `
});
// 创建VueRouter对象,并配置路由
var myRouter = new VueRouter({
    // 配置路由
    routes:[
        // 指定路由链接、路由名称、路由页面（组件）
        {path:'/login',name:'login',component:Login}
    ]
});

Usar enrutamiento:

var app= new Vue({
    el:'#app',
    // 引入到vue 实例中，并在模板中使用<router-view>
    router:myRouter,
    template:`
        <div>
        	头部
        	<router-view></router-view><!--路由出口-->
        	尾部
        </div>
    `
})

Salto de ruta

Hay dos formas de redirigir rutas:

  • Utilice la etiqueta <router-link>

    <router-link to='/login'></router-link>

  • Enrutamiento programático, usando js

    this.$router.push({path:'/login'});
this.$router.replace({path:'/login'});

ilustrar:

  1. this.$router.push(); agregará registros al historial
  2. this.$router.replace(); no agregará registros al historial.
  3. this.$router.go(-1) se usa a menudo para devolver la dirección anterior.

La diferencia entre empujar y reemplazar es si puedes usarlo hacia atrás o hacia adelante después de saltar. 

Objetos en rutas:

  1. this.$route Objeto de información de enrutamiento, de solo lectura.
  2. this.$router Objeto de operación de enrutamiento, solo escritura.

Ejemplo de salto:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        头部
        <router-link to="/login">登录</router-link><!--登录的标签方式-->
        <router-link to="/person">个人</router-link><!--个人的标签方式-->
        <button @click="toLogin">登录按钮</button><!--登录的点击事件方式-->
        <button @click="toPerson">个人按钮</button><!--个人的点击事件方式-->
        <!--下面是路由出口-->
        <router-view></router-view>
        尾部
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    //安装路由，前提要导入路由js
    Vue.use(VueRouter)
    //创建一个登录子组件
    var login={
        template:`
            <div>
                登陆页面
            </div>
        `,
    }
    //创建一个个人子组件
    var person={
        template:`
            <div>
                个人页面
            </div>
        `,
    }
    //创建路由配置实例，主要实现 路由和子组件之间的映射
    var myrouter=new VueRouter({
        routes: [
            {path:'/login',name:'login',component:login},
            {path:'/person',name:'person',component:person}
        ]
    })

    let app=new Vue({
        el:"#app",
        router:myrouter,
        methods: {
            toLogin(){
                this.$router.push({
                    path:'/login'
                })
            },
            toPerson(){
                this.$router.replace({
                    path:'/person'
                })
            },
        },
    })
</script>
</html>

Valor de paso y recuperación de rutas.

parámetros de consulta

configuración. El parámetro de consulta puede coincidir con el atributo de ruta o el atributo de nombre.

<router-link :to="{path:'/login',query:{id:queryid}}"></router-link>

o

<router-link :to="{name:'login',query:{id:queryid}}"></router-link>

o

this.$router.push({path:'/login',query:{id:this.queryid}});

tomando

// 此代码可以写到子组件的钩子函数中
this.$route.query.id

parámetro de enrutamiento

Configurar reglas de enrutamiento

var router = new VueRouter({
    routers:[
        // 需要在配置路由规则时，使用冒号指定参数
        {name:'login',path:'/login/:id',component:LoginVue}
    ]
});

configuración. Nota: Los dos parámetros de ruta y parámetros no se pueden usar al mismo tiempo aquí.

El nombre debe usarse al configurar los parámetros de enrutamiento, porque la ruta cambiará según los parámetros.

<router-link :to="{name:'login',params:{id:paramId}}"></router-link>

o

this.$router.push({name:'login',params:{id:this.paramId}});

tomando

// 此代码可以写到子组件的钩子函数中
this.$route.params.id

 Ejemplo de transferencia de valor:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        头部
        <router-link :to="{path:'/login',query:{id:loginId}}">登录query-link方式</router-link>
        <button @click="toLogin">登录query-按钮方式</button>
        <router-link :to="{name:'person',params:{id:personId}}">个人params-link方式</router-link>
        <button @click="toPerson">个人params-按钮方式</button>
        <br>
        <router-view></router-view><!--路由出口-->
        尾部
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    //安装路由，前提要导入路由js
    Vue.use(VueRouter)

    var login={
        template:`
            <div>
                登陆页面
            </div>
        `,
        mounted() {
            console.log(this.$route.query.id);
        },
    }
    //创建一个个人子组件
    var person={
        template:`
            <div>
                个人页面
            </div>
        `,
        mounted() {
            console.log(this.$route.params.id);
        },
    }
    //创建路由配置实例，主要实现 路由和子组件之间的映射
    var myrouter=new VueRouter({
        routes: [
            {path:'/login',name:'login',component:login},
            {path:'/person/:id',name:'person',component:person}
        ]
    })
    let app=new Vue({
        el:"#app",
        router:myrouter,
        data() {
            return {
                loginId:66,
                personId:33
            }
        },
        methods: {
            toLogin(){
                this.$router.push({
                    path:'/login',
                    query:{id:this.loginId}
                })
            },
            toPerson(){
                this.$router.push({
                    name:'person',
                    params:{id:this.personId}
                })
            },
        },
    })
</script>
</html>

La diferencia entre parámetros de consulta y parámetros de enrutamiento:

Los diferentes parámetros en la barra de direcciones.

Parámetro de consulta: Parámetro de enrutamiento:

 Preguntas que todos tendrán:

Misma ruta, pero diferentes parámetros. Para resolver el problema de que la página no se actualiza, solo necesita agregar un atributo a la salida de enrutamiento.

<router-view :key="$route.fullPath"></router-view>

rutas anidadas

Existe una relación jerárquica entre rutas. También tienen relaciones anidadas en plantillas.

Se pueden configurar varias rutas a la vez.

Instancia anidada:

Hay comentarios en los ejemplos para que todos los entiendan. Si no los entiende, puede leerlos varias veces y tal vez pueda entenderlos.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-view></router-view><!--路由出口-->
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    Vue.use(VueRouter);
    //导航组件
    let nav={
        template:`
        <div>
            <router-link :to="{name:'nav.index'}">首页</router-link>
            <router-link :to="{name:'nav.person'}">个人</router-link>
            <router-link :to="{name:'nav.message'}">消息</router-link>
            <router-view></router-view><!--导航组件的路由出口-->
        </div>
        `
    }
    //主页面子组件
    let index={
        template:`
            <div>主页面</div>
        `
    }
    //个人页面子组件
    let person={
        template:`
            <div>个人页面</div>
        `
    }
    //消息页面子组件
    let message={
        template:`
            <div>消息页面</div>
        `
    }

    let router=new VueRouter({
        routes:[
            {
                path:'/nav',
                name:'nav',
                component:nav,
                children:[//配置二级路由
                    {path:'',redirect:'/nav/index'},//默认显示二级路由页面链接是/nav/index的路由
                    {path:'index',name:'nav.index',component:index},
                    {path:'person',name:'nav.person',component:person},
                    {path:'message',name:'nav.message',component:message},
                ]
            },
            {
                path:'',
                redirect:'/nav'//默认显示页面链接是/nav的路由
            }
        ]
    })
    let app = new Vue({
        el:'#app',
        router,//这个地方使用的是简写根据ES6新语法，对象名和参数相同可以直接使用对象名。
    });
</script>
</html>

guardia de ruta

Se puede utilizar para verificar el inicio de sesión y juzgar si el carrito de compras salta a la página después de la compra.

Utilice la función de enlace de enrutamiento antes de cada uno para lograr

Instancia de guardia:

Puse el protector de ruta en la instancia de la ruta anidada hace un momento, la función es juzgar si la ruta es la página de inicio.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-view></router-view><!--路由出口-->
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    Vue.use(VueRouter);
    //导航子组件
    let nav={
        template:`
        <div>
            <router-link :to="{name:'nav.index'}">首页</router-link>
            <router-link :to="{name:'nav.person'}">个人</router-link>
            <router-link :to="{name:'nav.message'}">消息</router-link>
            <router-view></router-view><!--导航组件中的路由出口-->
        </div>
        `
    }
    //主页面子组件
    let index={
        template:`
            <div>主页面</div>
        `
    }
    //个人页面子组件
    let person={
        template:`
            <div>个人页面</div>
        `
    }
    //消息页面子组件
    let message={
        template:`
            <div>消息页面</div>
        `
    }

    let router=new VueRouter({
        routes:[
            {
                path:'/nav',
                name:'nav',
                component:nav,
                children:[//配置二级路由
                    {path:'',redirect:'/nav/index'},//默认显示二级路由页面链接是/nav/index的路由
                    {path:'index',name:'nav.index',component:index},
                    {path:'person',name:'nav.person',component:person},
                    {path:'message',name:'nav.message',component:message},
                ]
            },
            {
                path:'',
                redirect:'/nav'//默认显示页面链接是/nav的路由
            }
        ]
    })
    let app = new Vue({
        el:'#app',
        router,//这个地方使用的是简写根据ES6新语法，对象名和参数相同可以直接使用对象名。
        mounted() {
            this.$router.beforeEach((to,from,next)=>{
                console.log(to);
                if(to.path=='/nav/index'){
                    // 跳转到目标路由
                    next();
                }else{
                    //如果路径不对的话延时两秒再进入
                    setTimeout(function(){
                        next();
                    },2000);
                }
            });
        }
    });
</script>
</html>

Supongo que te gusta

Origin blog.csdn.net/zky__sch/article/details/132404281
Recomendado
Clasificación
Diario
Más
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(33)
2024-04-29(5)
2024-04-28(9)
2024-04-27(28)
2024-04-26(22)
2024-04-25(34)
2024-04-24(31)

Code World

© 2018 codetd.com