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

来源：互联网发布：access连接sql server 编辑：程序博客网时间：2024/06/07 10:40

一、需要达到的效果

原图效果：

原效果

仿写效果：

仿写效果

二、需要用到的知识

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})

四、效果展示及在线代码

demo效果展示

五、vue代码步骤总结

显示链接
配置路由
配置组件
创建 router 实例
挂载路由
渲染组件
重定向

阅读全文

1 0