??? 前端使用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,啥也没干,发现在切换子路由的时候,父路由标签按钮依然保持高亮,非常棒和贴心,不是吗?让你自己写监听函数,试试看,不是一个简单事呢。