Vue学习:路由

2019-05-28 本文已影响0人 Merbng

定义

对于普通的网站，所有的超链接都是URL地址，所有的ULR地址都对应服务器上对应的资源
对于单页面应用程序来说，主要通过URL中hash（#号）来实现不同页面之间的切换，同时，hash有一个特点，HTTP请求中不会包含由hash相关的内容，所以，单页面应用程序中的界面跳转只要是用hash实现

在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .myActive{
            font-size: 10px;
        }
        .router-link-active{
            background-color: red;
            font-size: 80px;
        }
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(140px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease;
        }
    </style>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div class="app">
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    <hr>
    <router-link to="/login">登录</router-link>
    <hr>
    <router-link to="/register" tag="button">注册, to</router-link>
    <transition mode="out-in">
    <router-view></router-view>
    </transition>
</div>
<script>
    var login = {
        template: '<h5>登录组件</h5>'
    };
    var register = {
        template: '<h5>注册组件</h5>'
    };
    var routerObj = new VueRouter({
        routes: [
//path 表示 监听 哪个路由链接地址
//component 表示 如果路由是前面匹配到的path，则展示component属性对应的那个组件
            {path: '/', redirect: '/login'},//重定向
            {path: '/login', component: login},
            {path: '/register', component: register}
        ],
        linkActiveClass:'myActive'
    });
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊'
        },
        methods: {},
//将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件
        router: routerObj

    })
</script>
</body>
</html>

路由规则中定义参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div class="app">
    <a href="#/login">登录</a>
    <a href="#/register">注册</a>
    <hr>
<!--如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path属性
    <router-link to="/register?id=20&name=注册啊">注册link</router-link>
    <router-link to="/login?id=220&name=张三">登录link</router-link>
  <router-view></router-view>
</div>
<script>
    var login={
        template:'<h5>登录组件===={{$route.query.id}}======={{$route.query.name}}</h5>'
        ,created(){//组件的生命周期钩子函数
            console.log(this.$route.query.id);
        }
    };
    var register = {
        template: '<h5>注册组件===={{$route.query.id}}======={{$route.query.name}}</h5>'
        ,created(){
            console.log(this.$route.query.id);
        }
    };
    var routerObj = new VueRouter({
        routes: [
            {path: '/login', component: login},
            {path: '/register', component: register}
        ]
    });
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊'
        },
        methods: {},
        router: routerObj
    })
</script>
</body>
</html>

传参方式

?& : /register?id=20&name=李四

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div class="app">
    <router-link to="/login?id=19&name=张三">登录</router-link>
    <router-link to="/register?id=20&name=李四">注册</router-link>
    <router-view></router-view>
</div>
<script>
    var login = {
        template: '<h5>登录组件==={{$route.query.id}}:{{$route.query.name}}</h5>'
        ,created(){
            console.log(this.$route.query.id+this.$route.query.name)
        }
    };
    var register = {
        template: '<h5>注册组件</h5>'
    };
    var routerObj = new VueRouter({
        routes: [
            {path: '/', redirect: '/login'},//重定向
            {path: '/login', component: login},
            {path: '/register', component: register}
        ],
        linkActiveClass:'myActive'
    });
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊'
        },
        methods: {},
        router: routerObj

    })
</script>
</body>
</html>

params : /login/10/张三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div class="app">
    <router-link to="/login/10/张三">登录</router-link>
    <router-link to="/register?id=20&name=李四">注册</router-link>
    <router-view></router-view>
</div>
<script>
    var login = {
        template: '<h5>登录组件==={{$route.query.id}}:{{$route.query.name}}====={{$route.params.id}}==={{$route.params.name}}</h5>'
        ,created(){
            console.log(this.$route.params.id)
        }
    };
    var register = {
        template: '<h5>注册组件</h5>'  ,created(){
            console.log(this.$route.query.id+this.$route.query.name)
        }
    };
    var routerObj = new VueRouter({
        routes: [
            {path: '/', redirect: '/login'},//重定向
            {path: '/login/:id/:name', component: login},
            {path: '/register', component: register}
        ],
        linkActiveClass:'myActive'
    });
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊'
        },
        methods: {},
        router: routerObj

    })
</script>
</body>
</html>

路由的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div class="app">
    <div>
        <router-link to="/account">Account</router-link>
        <router-view></router-view>
    </div>
</div>
<template id="tmpl">
    <div>
        <h1>这是Account组件</h1>
        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
    <!--    组件模板对象-->
    var account = {
        template: '#tmpl'
    };
    var login = {
        template: '<h3>登录</h3>'
    };
    var register = {
        template: '<h3>注册</h3>'
    };
    var routerObj = new VueRouter({
        routes: [
            {
                path: '/account', component: account, children: [
                    {path: 'login', component: login},
                    {path: 'register', component: register},
                ]
            },
        ]
    });
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊'
        },
        methods: {},
        router: routerObj
    })
</script>
</body>
</html>

命名视图实现经典布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .header {
            background-color: orange;
            height: 80px;
        }

        h1 {
            margin: 0;
            padding: 0;
            font-size: 16px;
        }

        .container {
            display: flex;
            height: 600px;
        }

        .left {
            background-color: lightgreen;
            flex: 2;
        }

        .main {
            background-color: lightpink;
            flex: 8;
        }
    </style>

    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div class="app">
    <router-view></router-view>
    <div class="container">
        <router-view name="left"></router-view>
        <router-view name="main"></router-view>
    </div>
</div>

<script>
    var header = {
        template: '<div class="header">Header头部区域</div>'
    };
    var leftBox = {
        template: '<div class="left">Left侧边区域</div>'
    };
    var mainBox = {
        template: '<div class="main">mainBox主体区域</div>'
    };
    var router = new VueRouter({
        routes: [
            {
                path: '/', components: {
                    'default': header,
                    'left': leftBox,
                    'main': mainBox
                }
            }
        ]
    });
    var vm = new Vue({
        el: '.app',
        data: {
            msg: '这是内容啊'
        },
        methods: {},
        router
    })
</script>
</body>
</html>

案例：watch监听路由的变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/login">登录</router-link>
    <router-link to="/register">注册</router-link>
    <!--容器-->
    <router-view></router-view>
</div>
<script>
    var login = {
        template: '<h3>这是登录子组件</h3>'
    };
    var register = {
        template: '<h3>这是注册子组件</h3>'
    };

    var router = new VueRouter({
        routes: [ // 路由规则数组
            {path: '/', redirect: '/login'},
            {path: '/login', component: login},
            {path: '/register', component: register}
        ],
        linkActiveClass: 'myactive' // 和激活相关的类
    });

    var vm = new Vue({
        el: '#app',
        data: {
            msg: '这是内容啊'
        },
        methods: {},
        router,
        watch: {
            '$route.path': function (newVal, oldVal) {
                if (newVal === '/login') {
                    console.log("欢迎来到登录页面")
                } else if (newVal === '/register') {
                    console.log("欢迎来到注册页面")
                }
            }
        }
    })
</script>
</body>
</html>

案例：名称拼接（三种实现方式）

键盘监听实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div class="app">
    <input type="text" v-model="firstname" @keyup="getFullname">+
    <input type="text" v-model="lastname" @keyup="getFullname">=
    <input type="text" v-model="fullname">
</div>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            firstname: '',
            lastname: '',
            fullname: '',
        },
        methods: {
            getFullname() {
                this.fullname = this.firstname + '-' + this.lastname
            }
        }
    })
</script>
</body>
</html>

watch监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div class="app">
    <input type="text" v-model="firstname"> +
    <input type="text" v-model="lastname"> =
    <input type="text" v-model="fullname">

</div>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            firstname: '',
            lastname: '',
            fullname: ''
        },
        methods: {},
        watch: {
            'firstname': function (newVal, oldVal) {
                console.log(newVal + '-' + oldVal);
                this.fullname = newVal + '-' + this.lastname
            },
            'lastname': function (newVal) {
                this.fullname = this.firstname + '-' + newVal
            }
        }
    })
</script>
</body>
</html>

computed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">

    <input type="text" v-model="firstname"> +
    <input type="text" v-model="middlename"> +
    <input type="text" v-model="lastname"> =
    <input type="text" v-model="fullname">
    <p>{{ fullname }}</p>
    <p>{{ fullname }}</p>
    <p>{{ fullname }}</p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: '',
            middlename: '',
            lastname: '',
        },
        methods: {},
        computed: {
            'fullname': function () {
                return this.firstname + '-' + this.middlename + '-' + this.lastname;
            }
        }
    })
</script>
</body>
</html>

Vue学习:路由

定义

基本使用

路由规则中定义参数

传参方式

路由的嵌套

猜你喜欢

热点阅读