【无标题】

最新推荐文章于 2024-11-18 18:03:48 发布

学不会的靓仔

最新推荐文章于 2024-11-18 18:03:48 发布

阅读量54

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_51290033/article/details/128540848

版权

router

<style>
    /*.router-link-active {
        color: red;
    }*/

    .myactive {
        color: red;
        font-size: 18px;
    }
</style>

<body>
    <div id="app">
        <div>12345</div>
        <router-view></router-view> <!--默认defailt -->
        <router-view name="login"></router-view><!--login， -->
        <router-view name="mine"></router-view><!--mine， -->


        <router-link to='/index'>首页</router-link>
        <!--声明式跳转-->
        <router-link to='/login'>登录</router-link>
        <router-link to='/login/register'>注册</router-link>
        <router-link to='/index?id=9'>首页</router-link>
        <router-link to='/login?id=8'>登录</router-link>
        <router-link :to="{path:'/index',query:{id:7,name:'zs'} }">首页</router-link>
        <router-link :to='{path:"/login",query:{id:6,name:"ls"} }'>登录</router-link>
        <router-link :to='{name:"/my",params:{id:999} }'>个人中心（有参）</router-link>
        <!--会报错 <router-link :to='{name:"my" }'>个人中心（无参）</router-link> -->



    </div>

    <template id="index">
        <div>
            <p>
                index
            </p>

            <!--函数式跳转-->
            <button @click="tologin">tologin</button>
            <button @click="tomine">tomine</button>
        </div>
    </template>

    <template id="login">
        <div>
            <router-link to="register"> register</router-link>
            <p>
                login
            </p>


        </div>
    </template>
    <template id="mine">
        <div>
            <h2>个人中心</h2>

        </div>
    </template>
</body>

<script>
    let index = {
        template: '#index',
        methods: {
            tologin() {
                this.$router.push({
                    path: '/login',
                    query: {
                        id: 6, name: "ls"
                    }
                })
                console.log(this.$router);
            },
            tomine() {
                this.$router.push({
                    path: '/my',
                    query: {
                        id: 999
                    }
                })
                console.log(this.$router);
            }
        },
    }

    let login = {
        template: '#login',
        methods: {

        },
        created() {
            console.log(this.$route);
        }
    }
    let mine = {
        template: '#mine ',

        created() {
            console.log(this.$route);
        }
    }
    let register = {
        template: '<h2>注册</h2>'
    }
    let router = new VueRouter({
        routes: [
            {
                path: '/',
                redirect: 'index',
            },
            {
                path: '/index',
                component: index,

                components:
                {
                    default: index,
                    login,
                    mine,
                }
                ,
            },
            {
                path: '/login',
                component: login,

                children: [
                    {
                        path: "register",//后路径不能加/
                        component: register,

                    }]
            },
            {
                path: '/my/:id',
                component: mine,
                name: '/my',

            },

        ],
        linkActiveClass: 'myactive',

    })
    let vm = new Vue({
        el: "#app",
        router: router
    })
</script>