22 vue路由基本使用

最新推荐文章于 2022-08-30 20:47:44 发布

Civitasv

最新推荐文章于 2022-08-30 20:47:44 发布

阅读量446

点赞数

分类专栏： Vue 文章标签： vue redirect router

本文链接：https://blog.csdn.net/qq_40996400/article/details/104418943

版权

Vue 专栏收录该内容

36 篇文章 2 订阅

订阅专栏

vue路由基本使用

vue路由用于单页面元素显示的切换。

下面是一个小栗子的步骤说明：

1 导包

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2 定义路由

var login = {
            template: "<h1>登录组件</h1>"
        }
var regist = {
            template: "<h1>注册组件</h1>"
        }
const router = new VueRouter({
       routes: [ //路由匹配规则数组
                // 每个路由规则都是一个对象，它含有两个必须的属性
                // 属性1是path，表示监听哪个路由链接地址
                // 属性2是component，表示匹配path时转到的组件，需要是个对象
                { path: "/login", component: login },
                { path: "/regist", component: regist }
            ]
})

3 在vue实例中声明

var vm = new Vue({
            el: "#app",
            data: {

            },
            router: router // 将路由规则对象注册到vm实例，用来监听url地址对应的组件
        })

4 在html中声明展示元素

<div id="app">
        <!--用于展示当前显示的由路由控制的组件-->
        <a href="#/login">login</a>
        <a href="#/regist">regist</a>
        <router-view>
        </router-view>
</div>

5 效果图

在这里插入图片描述

点击login和regist分别展示登录组件和注册组件。

6 改良

1 一般不使用超链接#/login这种格式，我们使用rooter-link标签，使用它的to属性，即：

<router-link to="/login">login</router-link>
<router-link to="/regist">regist</router-link>
<router-view></router-view>

router-link默认被渲染为a标签，若不想渲染为a标签，可以使用tag属性。

2 把默认访问改为登录组件，可以使用redirect属性：

{ path: "/", redirect: "/login" }

3 选中路由高亮，被选中的路由默认含有router-link-active类，若想修改这个类名，也可以修改linkActiveClass属性值，我们可以为其添加样式：

.router-link-active {
     background-color: aquamarine;
}

4 添加切换动画

.v-enter,
.v-leave-to {
    opacity: 0;
    transform: translateX(150px);
}

.v-enter-active,
.v-leave-active {
     transition: all 0.5s ease;
}
<transition mode="out-in">
      <router-view></router-view>
</transition>

7 总体代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue路由基本使用</title>
    <script src="vue/vue.js"></script>
    <script src="vue/vue-router.js"></script>
    <style>
        .router-link-active {
            background-color: aquamarine;
        }

        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(150px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 0.5s ease;
        }
    </style>
</head>

<body>
    <div id="app">
        <!--用于展示当前显示的由路由控制的组件-->
        <router-link to="/login">login</router-link>
        <router-link to="/regist">regist</router-link>
        <transition mode="out-in">
            <router-view></router-view>
        </transition>

    </div>
    <script>
        var login = {
            template: "<h1>登录组件</h1>"
        }

        var regist = {
            template: "<h1>注册组件</h1>"
        }

        const router = new VueRouter({
            routes: [ //路由匹配规则数组
                // 每个路由规则都是一个对象，它含有两个必须的属性
                // 属性1是path，表示监听哪个路由链接地址
                // 属性2是component，表示匹配path时转到的组件，需要是个对象
                { path: "/", redirect: "/login" },
                { path: "/login", component: login },
                { path: "/regist", component: regist }
            ]
        })
        var vm = new Vue({
            el: "#app",
            data: {

            },
            router: router // 将路由规则对象注册到vm实例，用来监听url地址对应的组件
        })
    </script>
</body>

</html>