vue 的router的简易运用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router.js"></script>
    <script>
        window.onload = function () {
            let rout = new VueRouter({
                routes: [
                    //传参时,注意是$route.params
                    {
                        path: '/user/:id', component: {
                            template: '<div>this is user,id is {{$route.params.id}}</div>',
                            beforeRouteUpdate(to, from, next) {
                                console.log('to:', to);
                                console.log(from);
                                //如果没有next(),那么就不会往下走
                                next();
                            }
                        }
                    }
                ]
            });

            let VM = new Vue({
                el: '#container',
                router: rout,
                methods: {
                    forward() {
                        //前进
                        this.$router.go(1);
                    },
                    backward() {
                        //后退
                        this.$router.go(-1);
                    },
                    push() {
                        //跳转
                        this.$router.push('/user/111');
                    }
                }
            })
        }
    </script>
</head>
<body>
<div id="container">
    <input type="button" value="前进" @click="forward">
    <input type="button" value="后退" @click="backward">
    <input type="button" value="跳转" @click="push"><br/>
    <router-link to="/user/111">user111</router-link>
    <router-link to="/user/222">user222</router-link>
    <router-link to="/user/333">user333</router-link>
    <router-view></router-view>
</div>
</body>
</html>
vue 的router的简易运用

猜你喜欢
