Vue路由典型示例

太阳不下山

　　前端使用Vue，Vue router是一道非迈不可的坎，今天这个典型实验可以加深对这个路由系统的入门了解：
　　二话不说上干货，工程文件路径长这样：

　　重要的路由index.js文件如下：

import Vue from 'vue'
import Router from 'vue-router'
import Film from '@/views/Film'
import Cinema from '@/views/Cinema'
import Center from '@/views/Center'
import Detail from '@/views/Detail'
import Nowplaying from '@/views/film/Nowplaying'
import Comingsoon from '@/views/film/Comingsoon'
Vue.use(Router)
export default new Router({
  mode: 'hash',
  routes: [
  {
    path: '/film',  
    component: Film,
    children:[
    {
    path: 'nowplaying',
    component: Nowplaying,
    children: [{
    path: 'detail/:id',
    component: Detail
    }]
    },
    {
    path: 'comingsoon',
    component: Comingsoon
    }
    ,{
    path: '',
    redirect: 'nowplaying'
    }
    ]
  },
  {
    path: '/cinema',  
    component: Cinema
  },
  {
    path: '/center',  
    component: Center
  },
  // {
  //   path: '/detail/:id',  //动态路由
  //   component: Detail
  // },
  {
  path: '*',
  redirect: '/film'
  }
  ]
})

　　App.vue主程序也没啥，就放了tabbar和路由出口，用element做了下美化：

<template>
  <div id="app">
  <el-row><tabbar></tabbar></el-row>
  <el-row><router-view/></el-row>
  </div>
</template>
<script>
import tabbar from '@/components/Tabbar'
export default {
  name: 'App',
  components:{
   tabbar
  }   
}
</script>
<style>
.el-row {
margin-top: 20px;
}
.el-card__header {
padding: 5px 15px;
background-color: #49bd14;
}
.el-card__body {
  padding: 3px;
}

</style>

　　每个子组件都是一个标签，一句话完事，没啥好介绍的，大家随意创建
　　看效果：

　　如此一来，基础路由，二级路由，三级路由，动态路由就都涵阔了，值得一提的是：router-link这个标签：
　　参考Tabber.vue 文件源码：

<template>
<el-card class="box-card" shadow="always">
  <div slot="header" class="clearfix">
  <span>Tabbar组件</span>  
  </div>
  <ul>
   <li><router-link to='/film' tag='el-button'  activeClass='el-button--primary'>film</router-link></li>
   <li><router-link to='/cinema' tag='el-button'  activeClass='el-button--primary '>cinema</router-link></li>
   <li><router-link to='/center' tag='el-button'  activeClass='el-button--primary '>center</router-link></li>
  </ul>
</el-card>
</template>
<script>
export default {
  name: 'Tabbar',
 
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.active {
color: red;
font-weight: bold;
}
.box-card {
  background-color: #00cfff3d;
  width: 300px;
}

</style>

　　发现router-link里面套用element的按钮组件，我只是指定了下activeClass，啥也没干，发现在切换子路由的时候，父路由标签按钮依然保持高亮，非常棒和贴心，不是吗？让你自己写监听函数，试试看，不是一个简单事呢。