使用vue路由做出一个可以切换的demo

最新推荐文章于 2025-10-09 22:13:48 发布

原创最新推荐文章于 2025-10-09 22:13:48 发布 · 6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css #vue #vue-js

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文通过一个具体案例展示了如何使用Vue和Vue Router实现简单的页面导航功能。包括定义路由组件、配置路由规则、创建Vue实例并挂载路由等内容。

一、需要达到的效果

原图效果：

原效果

仿写效果：

仿写效果

二、需要用到的知识

html
css
javascript、vue

三：源代码及注释

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue路由练习</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="icon" type="text/css" href="http://i2.muimg.com/567571/e0565125397e23c4.jpg">
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <div class="a">
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/recommend">推荐</router-link>
            <router-link to="/society">社会</router-link>
            <router-link to="/recreation">娱乐</router-link>
            <router-link to="/military">军事</router-link>
            <router-link to="/education">体育</router-link>
        </div>
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</body>
    <script type="text/javascript" src="js/index.js"></script>
</html>

css部分：

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

#app{
    width: 490px;
    border: 2px solid #666;
    margin:5px auto;
}

#app .a{
    padding: 10px;
    border-bottom: 2px solid #666;
}

a{
    display: inline-block;
    width: 90px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    /* 去处a链接下面的横线 */
    text-decoration: none;
    font-size:20px;
    background-color: #0AA770;
    color:#fff;
    border:2px solid #034D34;
}

#app div:last-child{
    padding:10px;
    text-align: center;
}

img{
    width: 400px;
    height: 300px;
}

javascript、vue部分：

// 定义（路由）组件。
var recommend = {
    template:`
    <div>
        <img src="https://ws1.sinaimg.cn/large/93838f95ly1fggker20l4j21hc0xcwfi.jpg" alt="">
    </div>
    `
}
var society = {
    template:`
    <div>
        <img src="https://ws1.sinaimg.cn/large/93838f95ly1fggkerb681j21hc0xcwfg.jpg" alt="">
    </div>
    `
}
var recreation = {
    template:`
    <div>
        <img src="https://ws1.sinaimg.cn/large/93838f95ly1fggker6tmaj21hc0xc75b.jpg" alt="">
    </div>
    `
}
var military = {
    template:`
    <div>
        <img src="https://ws1.sinaimg.cn/large/93838f95ly1fggkeqpmw4j21hc0xcdh1.jpg" alt="">
    </div>
    `
}
var education = {
    template:`
    <div>
        <img src="https://ws1.sinaimg.cn/large/93838f95ly1fggkeqjmjsj21hc0xct9n.jpg" alt="">
    </div>
    `
}
// 路由配置    每个路由应该映射一个组件。
// new VueRoute 创建 router 实例，然后传 `routes` 配置
var router = new VueRouter({
    routes: [
        {
            path:"/recommend",
            component:recommend
        },
        {
            path:"/society",
            component:society
        },
        {
            path:"/recreation",
            component:recreation
        },
        {
            path:"/military",
            component:military
        },
        {
            path:"/education",
            component:education
        },
// 路由重定向，保证打开页面的时候显示在设置的页面中（本demo设置的为推荐页/recommend）
        {
            path:"*",
            redirect: "/recommend"
        }
    ]
})
// 4. 创建和挂载根实例。（挂载路由）
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
new Vue({
    el:"#app",
    router:router
})