vue路由代码 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/course/1?age=2">课程页面</router-link>
    <router-view></router-view>
</div>

<script>
    let url = [
        {
            path: "/",
            name: "home",
            component: {
                template: `<div><h1>这是首页</h1></div>`
            }
        },
        {
            path: "/course/:id",
            redirect: {name: "home"},
            meta: {
                required_login: true
            },
            component: {
                template: `<div><h1>这是课程页面</h1></div>`
            }
        }
    ];
    let router = new VueRouter({
        routes: url
    });
    router.beforeEach(function (to, from, next) {
        // to 你要去哪
        // from 你从哪里来
        // next() 你要做什么
        // console.log(to)
        // console.log(from)
        // console.log(next)
        next()
    });
    router.afterEach(function (to, from) {
        // to 你要去哪
        // from 你从哪里来
        console.log(to)
        console.log(from)
    });

    const app = new Vue({
        el: "#app",
        router: router,
        mounted(){
            console.log(this.$route.meta);
            console.log(this.$router);

            // if(this.$route.meta.required_login){
            //     // this.$router.push("/")
            //     this.$router.push({name: "home", params: {id: 1}, query: {}})
            // }
        }

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

 

posted @ 2019-12-20 14:36  刀锋意志1  阅读(267)  评论(0)    收藏  举报