Vue路由典型示例

??? 前端使用Vue,Vue router是一道非迈不可的坎,今天这个典型实验可以加深对这个路由系统的入门了解:

二话不说上干货,工程文件路径长这样:

Vue路由典型示例

重要的路由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>

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

看效果:

Vue路由典型示例

如此一来,基础路由,二级路由,三级路由,动态路由就都涵阔了,值得一提的是: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,啥也没干,发现在切换子路由的时候,父路由标签按钮依然保持高亮,非常棒和贴心,不是吗?让你自己写监听函数,试试看,不是一个简单事呢。

Vue路由典型示例

上一篇:RunGame开发一


下一篇:OSPF_IA