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