vue-router使用（附开源vue项目）

自己做的vue的项目，打算开源发布出去。里面会不断的有新的文章，帮助大家走过各种坑，当然该项目还没完成，我个人也会尽快做。我会借着每次发布新文章时都推广一下。如果看到的，或是有兴趣的人可以给个star。真的非常感谢啦。
地址：
VUE项目

重点： 觉得还可地，顺便给颗星，谢谢

今天的文章是vue-router。

一、vue-router 2.x版本在vue-cli的使用。

router-link

首先：vue-cli的src下有App.vue和main.js
App.vue

    <div class="l_nav_flex">
      <div class="l_flex_item hover">
      // router-link 默认渲染为a，tag可以指定为其他
        <router-link to="/goods" tag="div">货源交易</router-link>
      </div>
      <div class="l_flex_item l_wire">
        <router-link to="/deal" tag="div">货源交易</router-link>
      </div>
      <div class="l_flex_item">
        <router-link to="/rent" tag="div">货源交易</router-link>
      </div>
    </div>
    // 引入的组件被渲染的位置（路由出口）
    <router-view></router-view>

    // 有时候我们要让激活 class 应用在外层元素
    <router-link tag="li" to="/foo">
      <a>/foo</a>
    </router-link>

二、基础5步：

main.js

// 1、import vue vue-router and invoke Vue.use(VueRouter) 导入vue-router 调用 Vue.use(VueRouter)
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 2. appoint router component 指定被路由的组件
import goods from './components/goods/goods.vue'
import deal from './components/deal/deal.vue'
import rent from './components/rent/rent.vue'

// 3. appoint router  指定路由方式
注意：该处的routes是必须的，如果我写的route将无法实现
const routes = [
  {
    path: '/goods',
    component: goods
  },
  {
    path: '/deal',
    component: deal
  },
  {
    path: '/rent',
    component: rent
  }
]

// 4. create router instance(实例) and pass to(传入) the configuration of route
const router = new VueRouter({
    routes
    // 2.5.0+通过该方式指定active（当前激活状态，常用的tab切换，当前激活的tab）
    // linkExactActiveClass: 'hover'
    })

// 5、. create and mount(挂载) to #app
const app = new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
}).$mount('#app')

// 这里结尾处app只是声明了。如果安装了eslint-friendly-formatter，会导致错误，可以改成如下写法。
//const app = new Vue({
//   el: '#app',
//   router,
//   template: '<App/>',
//   components: { App }
// })
// app.$mount('#app')

三、将routes分离出去

在src下，常常会有一个routers/index.js文件，为了便于维护，将路由单独分出来。

router/index.js

main.js

footer-nav.vue

应用：router-link 会激活两个类名linkActiveClass 和 linkExactActiveClass ，而这两个类名可以用来控制tab切换的当前选中状态

问题：初次加载的选中状态

上图的router/index.js中的path为空时重定向到/home，而foot-anv.vue中router-link路由到/home，即是首页，这样home的图标和文字被设置为选中（蓝色），如下图

四、编程式导航

编程式导航主要用了this.$router.push(path)，变量path就是要导航到的位置，将其放到一个方法内，通过在template内的click事件触发路由调整。

简单例子：

// 
        <section @click = "gotoAddress({path: '/msite'})" class="guide_item">
            <span>外卖</span>
        </section>

    export default {
        data(){
            return{

            }
        },
        created(){

        },
        mounted(){

        },
        methods: {
            gotoAddress(path){
                this.$router.push(path)
            }
        },

    }