Vue路由2

最新推荐文章于 2024-05-17 14:32:46 发布

晓殇大人

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量61

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/dx3906nnn/article/details/128556672

版权

选中路由高亮

<style>
    /* 默认选中路由高亮 */
    /* 直接添加该样式即可 */
    /* 点击过的跳转会变为该样式 */
    .router-link-active {
        color: pink;
    }

    /* 自定义选中路由高亮 */
    .myactive {
        color: gold;
    }
</style>

<body>
    <div id='app'>
        <router-view></router-view>
        <router-link :to="gomy">走一个</router-link>
    </div>

    <template id="isdetail">
        <div>
            <p>首页</p>
        </div>
    </template>
    <template id="ismy">
        <p>个人页面</p>
    </template>
</body>

<script>

    let index = {
        template: '#isdetail',
    }

    let my = {
        template: '#ismy'
    }

    const myRoute = new VueRouter({
        routes: [
            {
                path: '/',
                redirect: '/index'
            },
            {
                path: '/index',
                component: index
            },
            {
                name: '/my',
                path: '/my/id=120',
                component: my
            }
        ],
        // 在此自定义路由高亮的样式名称,用linkActiveClass属性
        linkActiveClass: "myactive"
    })

    const vm = new Vue({
        router: myRoute,
        el: '#app',
        data: {
            gomy: {
                name: '/my',
                params: 'id=120'
            }
        },
        methods: {
        }
    })
</script>

结果如下:
主页
在这里插入图片描述
个人页面

路由组件的嵌套

<body>
    <div id='app'>
        <router-view></router-view>
    </div>
    <template id="myindex">
        <div>
            <p>首页</p>
            <router-link :to='indexOk'>出来吧详情页!!!!!!</router-link>
            <router-view></router-view>
        </div>
    </template>

    <template id="mydetail">
        <div>
            <p>详情页</p>
        </div>
    </template>

</body>

<script>

    let index = {
        template: '#myindex',
        data() {
            return {
                indexOk: {
                    path: '/index/detail'
                },
            }
        }
    }

    let detail = {
        template: '#mydetail'
    }

    const myRoute = new VueRouter({
        routes: [
            {
                path: '/',
                redirect: '/index',
            },
            {
                path: '/index',
                component: index,
                children: [
                    {
                        path: 'detail',
                        component: detail
                    }
                ]
            },
        ]
    })


    const vm = new Vue({
        router: myRoute,
        el: '#app',
        data: {
        },
        methods: {
        }
    })
</script>

结果如下:
主页
在这里插入图片描述
详情页

命名视图

<body>
    <div id='app'>
        <router-view></router-view>
        <router-view name="detail"></router-view>
    </div>
    <template id="myindex">
        <div>
            <p>首页</p>
        </div>
    </template>

    <template id="mydetail">
        <div>
            <p>详情页</p>
        </div>
    </template>
</body>

<script>

    let index = {
        template: '#myindex',
        data() {
            return {
                indexOk: {
                    path: '/index/detail'
                },
            }
        }
    }

    let detail = {
        template: '#mydetail'
    }

    const myRoute = new VueRouter({
        routes: [
            {
                path: '/',
                redirect: '/index',
            },
            {
                path: '/index',
                // 如果碰到了命名视图,,将会在components里寻找除了default之外的名字,如果找到了匹配的名字,就会渲染该名字对应的路由组件
                components: {
                    // 默认路由,当遇到<router-view>时,当前页面的路由是谁,就渲染谁的路由组件
                    default: index,
                    detail
                }
            },
            {
                path: '/detail',
                components: {
                    default: detail,
                    index
                }
            }
        ]
    })


    const vm = new Vue({
        router: myRoute,
        el: '#app',
        data: {
        },
        methods: {
        }
    })
</script>