简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > vue路由-选项卡
Blogger Information
Blog 18
fans 1
comment 0
visits 17188
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
vue路由-选项卡
α清尘
Original
806 people have browsed it

Vue路由

需要注意的知识点：

  • <router-link>相当于<a>标签；路由是基于<a>标签的锚点创建的；
  • 通过<router-view></router-view>标签进行渲染；
  • 注册路由并进行配置时，每一个路由参数都是一个对象，而每一个对象都对应一个地址；
    path：路径，component：组件

代码展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>路由选项卡</title>
  7.     <script src="../lib/vue.js"></script>
  8.     <script src="vue-router-dev/dist/vue-router.js"></script>
  9.     <style>
  10.         *{ margin: 0; padding: 0; box-sizing: border-box;}
  11.         .app{ width: 310px; height: 180px; margin: 0 auto; background-color:#F0DEC4;}
  12.         .list{ width: 100px; height: 36px; display:inline-block; line-height: 36px; background: #93AD1C; color: #fff; text-decoration: none; text-align: center;}
  13.         .active{ background-color: slateblue;}
  14.         p{ padding: 12px 16px; color: #333;}
  15.         ul,li{ list-style: none;}
  16.         li{ border-bottom: 1px dashed #999; margin-top: 6px;}
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="app">
  21.         <router-link to="/pro1" :class="'list'">公司新闻</router-link>
  22.         <router-link to="/pro2" :class="'list'">行业新闻</router-link>
  23.         <router-link to="/pro3" :class="'list'">常见问题</router-link>
  24.         <!-- 渲染路由 -->
  25.         <router-view></router-view>
  26.     </div>
  27.     <script> 
  28.         const pro1={
  29.             template:"<p><ul><li>公司新闻列表1</li><li>公司新闻列表2</li></ul></p>"
  30.         }
  31.         const pro2={
  32.             template:"<p><ul><li>行业新闻列表1</li><li>行业新闻列表2</li><li>行业新闻列表3</li></ul></p>"
  33.         }
  34.         const pro3={
  35.             template:"<p>常见问题列表1</p>"
  36.         }
  37.         const router=new VueRouter({
  38.             routes:[
  39.                 // path:路径，component：组件
  40.                 {path:"/pro1",component:pro1},
  41.                 {path:"/pro2",component:pro2},
  42.                 {path:"/pro3",component:pro3}
  43.             ]
  44.         });
  45.         const vm=new Vue({
  46.             // router:router,
  47.             router,
  48.             el:".app"
  49.         })
  50.     </script>
  51. </body>
  52. </html>

效果展示：

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！