Vue Router

最新推荐文章于 2023-06-05 11:06:43 发布

wyf.world

最新推荐文章于 2023-06-05 11:06:43 发布

阅读量124

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weitunfei/article/details/124931698

版权

本文详细介绍了VueRouter的使用，包括基础知识、创建路由、挂载路由器、便捷方式、声明式导航和编程式导航。通过实例展示了如何在Vue应用中实现不同页面的切换，以及设置默认路由。此外，还提到了使用`router-link`和`router-view`进行导航和展示组件的方法。

摘要由CSDN通过智能技术生成

一.Vue Router概述

Vue路由：路由根据不同的路径，执行不同的组件

二.Vue Router入门

1.引入vue,js和vue-router.js

2.创建组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/vue.min.js"></script>
    <script type="text/javascript" src="../public/js/vue-router-3.4.9.js"></script>
</head>
<body>

<div id="app">

    

</div>

<!--注册-->
<template id="register">
    <h1>这是注册页面</h1>
</template>

<!--登录-->
<template id="login">
    <h1>这是登录页面</h1>
</template>

<script>

    let RegisterComponent = {
        template:"#register"
    }

    let LoginComponent = {
        template: "#login"
    }



    new Vue({
        el:"#app",
        components:{RegisterComponent,LoginComponent}
    });

</script>

</body>
</html>

3.创建router

// 创建路由【添加路由规则】
    let vueRouter = new VueRouter({
        routes:[
            {
                name:"register",// 路由名称
                path:"/register",// 组件对应的路由路径
                component:RegisterComponent
            },
            {
                name:"login",// 路由名称
                path:"/login",// 组件对应的路由路径
                component:LoginComponent
            }
        ]
    });

4.挂载router

new Vue({
        el:"#app",
        components:{RegisterComponent,LoginComponent},
        router
    });

5.使用router

<div id="app">

    <!--<a href="#/register">注册</a>
    <a href="#/login">登录</a>-->

    <router-link to="/register">注册</router-link>
    <router-link to="/login">登录</router-link>


    <hr>

<!--    负责展示组件-->
    <router-view></router-view>

</div>

三.router便捷方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/vue.min.js"></script>
    <script type="text/javascript" src="../public/js/vue-router-3.4.9.js"></script>
</head>
<body>

<div id="app">


    <router-link v-for="(item,index) in array" :key="index" :to="item.path" v-text="item.context"></router-link>

<!--    负责展示组件-->
    <router-view></router-view>

</div>

<!--注册-->
<template id="register">
    <h1>这是注册页面</h1>
</template>

<!--登录-->
<template id="login">
    <h1>这是登录页面</h1>
</template>

<script>

    let RegisterComponent = {
        template:"#register"
    }

    let LoginComponent = {
        template: "#login"
    }


    // 创建路由【添加路由规则】
    let router = new VueRouter({
        routes:[
            {
                name:"register",// 路由名称
                path:"/register",// 组件对应的路由路径
                component:RegisterComponent
            },
            {
                name:"login",// 路由名称
                path:"/login",// 组件对应的路由路径
                component:LoginComponent
            }
        ]
    });

    new Vue({
        el:"#app",
        components:{RegisterComponent,LoginComponent},
        router,
        data:{
            array:[
                {path:"/register",context:"注册"},
                {path:"/login",context:"登录"}
            ]
        }
    });


</script>

</body>
</html>

四.声明式导航

1.字符串类型

<router-link to="/login">登录</router-link>

2.对象类型

2.1、path

<router-link :to="{path:'/register'}">注册</router-link>

2.2、name

<router-link :to="{name:'register'}">注册</router-link>

五.编程式导航

methods:{
    loginGo(){
        this.$router.push({path:"/login"});
    }
}

六.默认路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../public/js/vue.min.js"></script>
    <script type="text/javascript" src="../public/js/vue-router-3.4.9.js"></script>
</head>
<body>

<div id="app">

    <router-link to="/register">注册</router-link>
    <router-link to="/login">登录</router-link>

    <router-view></router-view>
</div>

<template id="registerId">
    <h1>这是注册页面</h1>
</template>

<template id="loginId">
    <h1>这是登录页面</h1>
</template>


<script>

    let RegisterComponent = {
        template:"#registerId"
    }

    let LoginComponent = {
        template: "#loginId"
    }

    let router = new VueRouter({
        routes:[
            {
                name:"register",
                path:"/register",
                component:RegisterComponent
            },
            {
                name:"login",
                path:"/login",
                component: LoginComponent
            },
            { // 配置默认路由
                path:"/", // 路由地址
                redirect:"/login" // 重定向
            }
        ]
    });

    new Vue({
        el:"#app",
        router
    });

</script>

</body>
</html>