Vue路由实现页面跳转

最新推荐文章于 2025-03-19 20:46:00 发布

11adaacc

最新推荐文章于 2025-03-19 20:46:00 发布

阅读量348

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Rayshaan/article/details/113575595

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用Vue.js进行页面路由管理，包括默认加载'猜你喜欢'页面，实现商品详情页、分类页和购物车页面之间的跳转，以及返回功能。用户可以从猜你喜欢和购物车页面进入商品详情，点击分类进入分类页面，并在购物车和个人页面之间切换。点击返回按钮则能回到上一页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求：

默认加载猜你喜欢页面
猜你喜欢和购物车在一个页面，我的在另一个页面
点击商品可以进入商品详情页
点击返回可以返回之前的页面

<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <!-- 默认渲染此模板 -->
    <template id="first">
        <main>
            <router-view></router-view>
            <ul>
                <li><router-link to="like">猜你喜欢</router-link></li>
                <li><router-link to="buy">购物车</router-link></li>
                <li><router-link to="my">我的</router-link></li>
            </ul>
        </main>
    </template>
    <template id="like">
        <main>
            <h1>这是猜你喜欢</h1>
            <ul>
                <li><router-link to="shiling">时令生鲜</router-link></li>
                <li v-for="(item,index) in list">
                	<router-link :to="item.path+'/'+item.id">{{item.con}}</router-link>
                </li>
            </ul>
        </main>
    </template>
    <template id="buy"><h1>这是购物车</h1></template>
    <template id="my">
        <div>
            <h1>这是我的页面</h1>
            <button @click="back()">返回</button>
        </div>
    </template>
    <template id="shiling">
        <div>
            <h1>这是时令生鲜</h1>
            <button @click="back()">返回</button>
        </div>
    </template>
    <template id="details"><h1>这是详情页</h1></template>

    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script>
        let first={template:"#first"};
        let like={
            template:'#like',
            //商品
            data(){
                return {
                    list:[
                        {
                            con:'擦玻璃神器',
                            path:'/details',
                            id:0
                        },
                        {
                            con:'红酒',
                            path:'/details',
                            id:1
                        }
                    ]
                }
            }
        };
        let buy={template:"#buy"};
        let my={
            template:'#my',
            methods:{
            	//返回上一层
                back(){
                    this.$router.go(-1);
                }
            }
        };
        let shiling={
            template:'#shiling',
            methods:{
            	//返回上一层
                back(){
                    this.$router.go(-1);
                }
            }
        }
        let details={
            template:'#details',
            mounted(){
                console.log(this.$route.params)
            }
        };
        const router=new VueRouter({
            routes:[
                {
                	//默认加载first模板
                    path:'/',
                    component:first,
                    //配置子路由
                    children:[
                        {
                            path:'/like',
                            component:like
                        },
                        {
                            path:'/buy',
                            component:buy
                        },
                        {
                            path:'/shiling',
                            component:shiling
                        }
                        
                    ],
                    redirect:'/like'
                },
                //商品详情页
                {
                    path:'/details/:vue',
                    component:details
                },
                {
                    path:'/my',
                    component:my
                },
                //以上路径都不符合重定向到like
                {
                    path:'/*',
                    redirect:'/like'
                }
            ]
        });
        new Vue({
            el:"#app",
            router:router
        })
    </script>
</body>