vue router基本使用

作者: ropon 分类: Vue 发布时间: 2019-01-07 13:43
<!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>
</head>
<body>
<div id="app">

</div>
<script src="https://mirrors.idiyrom.com/web/js/vue.mini.js"></script>
<script src="https://mirrors.idiyrom.com/web/js/vue-router.js"></script>
<script src="https://mirrors.idiyrom.com/web/js/jquery.min.js"></script>
<script>
    const Home = {
        data() {
            return {

            }
        },
        template: `<div>我是首页</div>`
    };
    const Course = {
        data() {
            return {
                categoryList: []
            }
        },
        template: `
            <div>
                <span v-for="(item, index) in categoryList" :key="index"> {{ item.name }} </span>
            </div>`,
        methods: {
            getCategroyList() {
                $.ajax({
                    url: 'https://vue.ropon.top/api/v1/course_sub/category/list/',
                    type: 'get',
                    success: (data) => {
                        if (data.error_no === 0) {
                            var data = data.data;
                            let obj = {
                                id: 0,
                                name: "全部",
                                category: 0
                            };
                            this.categoryList = data;
                            this.categoryList.unshift(obj);
                            console.log(this.categoryList);
                        }
                    },
                    error: function (err) {
                        console.log(err);
                    }
                });
            }
        },
        created() {
            console.log("ceshi");
            this.getCategroyList();
        }
    };

    //动态路由模式:
    // https://vue.ropon.top/user/1 params
    // https://vue.ropon.top/user/2
    // https://vue.ropon.top/user?user_id=1 query
    const User = {
        data() {
            return {
                user_id: null
            }
        },
        template: `<div>
                        我是用户:{{ user_id }}
                        <button @click="clickHandler">跳转首页</button>
                   </div>`,
        created() {
            this.user_id = this.$route.params.id;
        },
        watch: {
            "$route": function(to, from) {
                this.user_id = to.params.id;
                console.log(from);
            }
        },
        methods: {
            clickHandler() {
                // 编程式的导航
                this.$router.push({
                    name: "Home"
                })
            }
        }
    };

    // 创建路由
    const router = new VueRouter({
        //定义路由规则
        // mode: "history",
        routes: [
            {
                path: "/",
                redirect: "/home",
            },
            {
                path: "/home",
                name: "Home",
                component: Home
            },
            {
                path: "/course",
                name: "Course",
                component: Course
            },
            {
                path: "/user/:id",
                name: "User",
                component: User
            }
        ]
    });

    let App = {
        data() {
            return {

            }
        },
        //router-link和router-view是vue-router提供的两个全局组件
        //router-view 是路由组件的出口
        //router-link默认会渲染成a标签,to属性默认被渲染成href

        // <router-link :to="{name: 'User', params: {id: 1}}">用户1</router-link>
        // <router-link :to="{name: 'User', params: {id: 2}}">用户2</router-link>
        template: `
            <div>
                <div class="header">
                    <router-link :to="{name: 'Home'}">首页</router-link>
                    <router-link :to="{name: 'Course'}">免费课程</router-link>
                    <router-link :to="{name: 'User', params: {id: 1}}">用户1</router-link>
                    <router-link :to="{name: 'User', params: {id: 2}}">用户2</router-link>

                </div>
                <router-view></router-view>
            </div>`
    };
    new Vue({
        el: '#app',
        //挂载 路由对象
        router,
        data() {
            return {

            }
        },
        template: `<App></App>`,
        components: {
            App
        }
    });
</script>
</body>
</html>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!