Vue页面跳转

小白做毕设中遇到问题：在同一个旅游页面中，想通过点击不同旅游景点的标题，就能跳转到相应的页面。但是我只能实现到点击不同旅游景点的标题，跳转到同一个页面。想请各位大佬帮忙！

实现页面跳转的主要代码截图如下：我只能做到点击不同旅游景点的标题，都跳转到路由为/tower的页面。想知道如何修改代码才可以实现跳转到相应旅游景点的页面呢？？？ 

我自己的代码如下：

<template>
    <div id="stratety">
        <div id="stratety_title">
            <div>旅游攻略</div>
        </div>
        <div id="hotStratety">
            <div class="Stratety_item" v-for="(item,index) in Stratety" :key="item.url">
                <div class="Stratety_item_img">
                    <img :src="item.url" alt="">
                </div>
                <div class="Stratety_item_content">
                    <div class="Stratety_item_title" @click="todetail('/tower')">{{item.title}}</div>
                    <div class="Stratety_item_details">{{item.details}}</div>
                    <div class="Stratety_item_bottom">
                        <span class="Stratety_item_local">{{item.local}} /</span>
                        <span class="Stratety_item_time">{{item.time}}</span>
                        <span class="Stratety_item_viewNumber"> 浏览·{{item.viewsNumber}}</span>
                        <div class="Stratety_item_islike" @click="changeLike(index)">
                            <img src="../../assets/img/HomePage/unlike.png" alt="" v-if="!item.islike">
                            <img src="../../assets/img/HomePage/like.png" alt="" v-else>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="stratety_page">
            <div class="pages">1</div>
            <div class="pages">2</div>
            <div class="pages">3</div>
            <div class="pages">4</div>
            <div class="pages">5</div>
            <div class="next">下一页</div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                Stratety:[
                    {
                        url:require('assets/img/TravelNote/相公山.png'),
                        title:'相公山 | 喀斯特地貌，登顶览“漓江第一湾”',
                        details:'相公山位于阳朔兴坪镇境内的漓江西岸，登上相公山举目远眺，群峰排列有序，' +
                            '清澈的漓江蜿蜒流淌在群山怀抱中。其光影、云海、日出、彩霞都吸引了无数的摄影师前来拍摄。' +
                            '如果想来相公山看日出，一般早上三四点就要出发，路途较陡，后半段盘山公路没有路灯，' +
                            '不熟悉路况的小伙伴一定要小心！爬相公山十五分钟左右，有两三个观景台，可航拍，非常出片。',
                        local:'桂林市阳朔县',
                        time:'2023-2-6',
                        viewsNumber:'758689',
                        islike:false
                    },
                    {
                        url:require('assets/img/HomePage/龙脊梯田.png'),
                        title:'龙脊梯田 | 春如层层银带，夏滚道道绿波。秋叠座座金塔，冬似群龙戏水。',
                        details:'龙脊梯田四季风光各有特色。4月-5月：梯田开始放水，准备春耕，田里的水倒影出山峦和云彩，' +
                            '适合拍日出日落。5月﹣6月：刚插秧，风景如画。7月中旬：稻谷初长，绿油油一片。' +
                            '中秋前后：稻谷成熟，金黄一大片。冬天下雪时：每年只有一两次下雪，雪中的梯田更分明，只是可遇不可求。',
                        local:'桂林市龙胜县',
                        time:'2023-2-18',
                        viewsNumber:'18689',
                        islike:false
                    },
                    {
                        url:require('assets/img/HomePage/融创乐园.png'),
                        title:'融创乐园 | 欢乐共度海世界，奇幻漂流远木筏。',
                        details:'行程第一天，来到了桂林融创国际旅游度假区。整个园区很大，设计非常具有桂林特色，' +
                            '路上有穿着各种卡通人物服的工作人员，非常友好热情。我比较喜欢的几个游玩项目，有' +
                            '“丛林飞旋”：有种在空中飞旋的感觉；“桂林之眼”：运气好的可以排队排到KTV仓，边唱歌边俯瞰游区的风景，' +
                            '一圈下来大概20分钟。还有一些刺激项目如“疯狂凌波舞”、“椰林欢哥”、“奇幻漂流”等。' ,
                        local:'桂林市雁山区',
                        time:'2023-3-2',
                        viewsNumber:'2429',
                        islike:false
                    },
                    {
                        url:require('assets/img/HomePage/日月双塔.png'),
                        title:'日月双塔 | 金银双塔波泛金，碧波晚舟夜如银。夜宿杉湖水墨芳，日月同辉各有天。',
                        details:'桂林两江四湖的夜晚，霓虹闪烁，日月双塔在夜幕下更加夺目，甚被网友戏称是“东方青苍”和“长珩仙君”。' +
                            '夜晚与家人环绕塔边散步，十分惬意，是拍照打卡的好地方。',
                        local:'桂林市象山区',
                        time:'2023-4-24',
                        viewsNumber:'5876',
                        islike:false
                    },
                ]
            }
        },
        methods: {
            changeLike(index) {
                this.Stratety[index].islike = !this.Stratety[index].islike;
            },
            todetail(path) {
                this.$router.push(path)
            }
        }
    }
</script>
<style>
    #stratety {
        width: 100%;
        margin: 0 auto;
        padding-top: 45px;
        position: relative;
    }
    #stratety_title {
        color: white;
        width: 65%;
        border-bottom: 2px solid white;
        padding-bottom: 5px;
        position: relative;
        display: flex;
        margin: 0 auto;
    }
    #stratety_title :nth-child(1) {
        position: relative;
        left: 0px;
        font-size: 20px;
        font-weight: 700;
        margin-left: 10px;

    }

    #hotStratety {
        width: 70%;
        margin: 0 auto;
    }
    .Stratety_item {
        margin: 0 auto;
        width: 90%;
        margin-top: 50px;
        display: flex;
        height: 160px;
        position: relative;
    }
    .Stratety_item_img {
        flex: 1;
        height: 100%;
        background-color: black;
        overflow: hidden;
    }
    .Stratety_item_img:hover img{
        transform: scale(1.03);
        opacity: 0.7;
        cursor: pointer;
    }
    .Stratety_item_img img {
        width: 101%;
        height: 101%;
        transition: all 0.6s;
    }
    .Stratety_item_content {
        flex: 3;
        margin-left: 15px;
        position: relative;
    }
    .Stratety_item_title {
        width: 100%;
        margin-top: 10px;
        color: white;
        font-size: 20px;
    }
    .Stratety_item_details {
        width: 100%;
        height: 60px;
        text-overflow: ellipsis;
        margin-top: 15px;
        color: rgb(199, 196, 196);
        font-size: 14px;
    }
    .Stratety_item_details:hover,.Stratety_item_title:hover {
        cursor: pointer;
        text-decoration: underline;
    }
    .Stratety_item_bottom {
        position: absolute;
        width: 100%;
        bottom: 5px;
        font-size: 13px;
        color: rgb(255, 255, 255);
    }
    .Stratety_item_islike {
        height: 40px;
        width: 40px;
        position: absolute;
        right: 0px;
        bottom: 0px;
    }
    .Stratety_item_islike:hover {
        cursor: pointer;
        transform: scale(1.05);
    }
    .Stratety_item_bottom img {
        width: 40px;
    }
    #stratety_page {
        position: relative;
        width: 20%;
        height: 20px;
        left: 50%;
        margin-top: 30px;
        transform: translateX(-50%);
        text-align: center;
        line-height: 20px;
        font-size: 14px;
        color: rgb(206, 204, 204);
        display: flex;
    }
    .pages {
        flex: 1;
    }
    #stratety_page > div:hover {
        cursor: pointer;
        text-decoration: underline;
    }
</style>