在vue-cli（脚手架）上使用Vue-router

VUE之Vue-router

vue-router是什么呢？
它就是由前端来控制页面的跳转（但其实是个单页面），根据不同的 url 地址展示不同的内容和页面。

安装
1、在项目根目录敲

npm install vue-router -S

2、安装完之后，在main.js文件中配置以下代码

import Vue from 'vue'
import App from './App'
import router from './router' 

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, // 使用路由
  render: h => h(App),
})

3、然后在根目录下创建router文件其下自带index.js配置文件

配置代码如下：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
// 引入组件
import PunchClock from '../pages/PunchClock/PunchClock'
export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/punch'
    },
    { // 打卡
      path: '/punch',
      component: PunchClock,
      meta: { FoodShow: true }
    },
  ]
})

4、在APP.vue文件中配置如下：

<template>
  <div id="app">
  /* 路由的核心*/
    <router-view/>
    <Fooders v-show="$route.meta.FoodShow"></Fooders>
  </div>
</template>

<script>
  import Fooders from './components/Fooder/Fooder'
  import { mapState } from 'vuex'
export default {
    data() {
      return {
        isLogin: false // 判断是否登录过
      }
    },
    created() {
      this.getUseInfo()
      console.log(!this.userInfo.id)
      if(!this.userInfo.id) {
        this.$router.replace('/login')
      }
    },
    methods: {
      getUseInfo() {
        this.$store.dispatch('getUseInfo')
      }
    },
    computed: {
      ...mapState(['userInfo'])
    },
    components: {
      Fooders
    }
}
</script>

<style lang="scss" scoped>
  #app {
    position: relative;
  }
</style>

基本的路由使用方式就如以上，其中router-link没讲，其本身并不难相当于a标签的作用