【vue.js】借助vue-router实现切换视图（组件）的demo

最新推荐文章于 2025-06-08 15:19:20 发布

原创最新推荐文章于 2025-06-08 15:19:20 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个使用Vue.js和Vue-router实现的基本网页应用案例，其中包括了导航链接和不同页面组件之间的切换。通过三个简单的页面（首页、小游戏页和个人设置页），展示了如何在单一页面应用中进行模块化的页面管理和路径导航。

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

<!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>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
<div id="app">
    <div class="nav">
        <router-link to="/mainPage">首页</router-link>
        <router-link to="/games">小游戏</router-link>
        <router-link to="/setting">个人设置</router-link>
    </div>
    <div id="content">
        <router-view></router-view>
    </div>
</div>
</body>
<script>
    const comp1={
        template:  `
        <div>lalalalallalal</div>
        `
    };
    const comp2={
        template:`
        <div>bababbabababbab</div>
        `
    };
    const comp3={
        template:`
        <div>yayayayyayayay</div>
        `
    };
    const router=new VueRouter({
        routes:[
            {
                path:'/mainPage',
                component:comp1,
            },
            {
                path:'/games',
                component:comp2,
            },
            {
                path:'/setting',
                component:comp3,
            }
        ]
    });
    const app=new Vue({
        el:'#app',
        router:router,
    });
</script>
</html>