PHPer快速上手VUE——边学边练4–简单学习vue路由

admin | 2020年6月23日 | 学习偶记 | 评论已关闭 | 1601

学习这个路由之前，我们先看一下如何我们自定义了头部导航和底部导航，页面如何引用。

APP.vue 源码：它是我们的根页面。我们把头部和尾部组件引入。

<template>
  <div id="app">
    <v-header v-if="$route.meta.isshowheard" ref="head"></v-header>
    <router-view/>
    <v-tab-bar v-if="$route.meta.isshowtabbar" ref="bar"></v-tab-bar>
  </div>
</template>

<script>
  import tabBar from './components/Tabbar.vue'
  import Header from './components/Header.vue'
export default {
  name: 'App',
  components: {
    'v-tab-bar': tabBar,
    'v-header' : Header
  }
}
</script>

<style>
#app {
}
</style>

<v-header v-if="$route.meta.isshowheard" ref="head"></v-header>

<router-view/>

<v-tab-bar v-if="$route.meta.isshowtabbar" ref="bar"></v-tab-bar>

</div>

</template>

import tabBar from './components/Tabbar.vue'

import Header from './components/Header.vue'

export default {

components: {

'v-tab-bar': tabBar,

'v-header' : Header

}

</script>

<style>

#app {

}

</style>

大家发现我使用了

&lt;v-header v-if="$route.meta.isshowheard" ref="head"&gt;&lt;/v-header&gt;

1	<v-header v-if="$route.meta.isshowheard" ref="head"></v-header>

v-if="$route.meta.isshowheard"

1	v-if="$route.meta.isshowheard"

这句话，这句话的意思是：假如路由的meta里，isshowheard的值是true ,则显示头部组件。

OK，路由的第一个功能：在meta中，可以定义变量值。

然后我们看一下main.js源码：

import Vue from 'vue'
import App from './App'
import router from './router/index'
import utils from './utils/util'


import './assets/css/frozenui.css'

Vue.config.productionTip = false
Vue.prototype.$utils = utils;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

import Vue from 'vue'

import App from './App'

import router from './router/index'

import utils from './utils/util'

import './assets/css/frozenui.css'

Vue.config.productionTip = false

Vue.prototype.$utils = utils;

new Vue({

router,

render: h => h(App)

}).$mount('#app')

知识点：

Vue.prototype.$utils = utils;

1	Vue.prototype.$utils = utils;

全局实例 以及实例定义中的$ 参考资料：https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html

import utils from ‘./utils/util’ 这里放的是一些我自己写的公共函数，比如时间戳转日期。

until.js的源码

这里的自定义函数如何使用？因为main.js已经导入并且实例化了，所以页面中直接使用：

this.utils.函数名（参数）

1	this.utils.函数名（参数）

我们又发现main.js中的一条语句：import router from ‘./router/index’

从上图中可以看到，是导入了路由目录下的index.js文件。为什么不使用$实例化呢？我把/router/index.js代码贴出来。

import Vue from 'vue'
import Router from 'vue-router'

import routes from './router' //加载路由表

Vue.use(Router)

const router = new Router({
  routes,
})

export default router

import Vue from 'vue'

import Router from 'vue-router'

import routes from './router' //加载路由表

Vue.use(Router)

const router = new Router({

routes,

})

export default router

从代码中，我们可以看出这个代码中，实例化了一个new Router。所以不用$来实例化。这样写，其实是将路由当作一个组件来看待。

import routes from ‘./router’ //加载当前目录下的router.js。router.js源码

import App from '../App'

// home
const Home = () => import('@/page/Home')
// home
const Order_list = () => import('@/page/OrderList')

export default [
    {
        path: '/',
        component: App,
        children: [
            {
                name: 'OrderList',
                path: '/',
                component: Order_list,
                meta: {
                    isshowheard: true, //是否显示头部导航
                    isshowtabbar: true, //是否显示底部导航
                    title: '订单列表' //头部导航的标题
                }
            },
            {
                name: 'home',
                path: '/',
                component: Home,
                meta: {
                    isshowheard: false,
                    isshowtabbar: false,
                }
            },

        ]
    }
]