vue-router2.0的用法

随着vue越来越火，而vue-router却是一个项目不可或缺的，所以在这里结合实例总结一下router的用法，也是给自己的一个总结。

1、首先第一步当然是安装vue-router依赖，当然也可直接script引用。接着新建一个router文件下新建一个index.js，这个文件主要用于配置路由。index.js代码如下：

import Vue from 'vue'

import Router from 'vue-router'

 

Vue.use(Router)

const Recommend = () => import('components/recommend/recommend')

const Rank = () => import('components/rank/rank')

const Search = () => import('components/search/search')

const SingerDetail = () => import('components/singer-detail/singer-detail')

const TopList = () => import('components/top-list/top-list')

 

export default new Router({

  routes: [

    {

      path: '/',

      redirect: '/recommend'

    },

    {

      path: '/rank',

      component: Rank,

      children: [

        {

          path: ':id',

          component: TopList

        }

      ]

    },

    {

      path: '/search',

      component: Search,

      children: [

        {

          path: ':id',

          component: SingerDetail

        }

      ]

    }

  ]

})

我相信看过官网的都大概明白上面代码的意思，path:’/’意思是默认指定的路由路径，也就是刚进去指定的路由，这里默认指向recommend；而每个children代表子路由，比如Search这个组件的子路由是SingerDetail，当然可以指定三级、四级路由。

2、第二步就是在main.js文件下引入router这个文件，并初始化。代码如下：

import Vue from 'vue';

import App from './App';

import router from './router';

 

new Vue({

  el: '#app',

  router,

  render: h => h(App)

});

3、第三步在App.vue这个文件下定义一个容器用于展示路由指定下的组件。代码如下：

<template>

  <div id="app" @touchmove.prevent>

      <div class="tab">

          <router-link tag="div" to="/recommend">

            <span class="tab-link">推荐</span>

          </router-link>

          <router-link tag="div" to="/rank">

            <span class="tab-link">排行</span>

          </router-link>

          <router-link tag="div" to="/search">

            <span class="tab-link">搜索</span>

          </router-link>

      </div>

      <keep-alive>

        <router-view></router-view>

      </keep-alive>

  </div>

</template>

<router-view></router-view>就是路由容器，之所以放在keep-alive这个标签下是对数据进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染。To=”/recommend”表示点击”推荐”这个标签就跳转到recommend这个路由，也就是我们之前配置的路径。

讲到这里我们已经简单的完成一个单页面应用了。这里我采用的是模块化编程。我把路由配置、初始化、渲染写在各个文件下。这样也符合大家的组件化开发思路。下面我在进行一些路由用法的补充。

4、多级路由的用法

<template>

  <div class="recommend">

    <ul>

        <li @click="selectItem(item)" v-for="item in discList" class="item">

          item.text

        </li>

    </ul>

    <router-view></router-view>

  </div>

</template>

<script type="text/ecmascript-6">

  export default {

    data() {

      return {

        discList: [

          {dissid:1,text:'条目1'},

          {dissid:2,text:'条目2'},

          {dissid:2,text:'条目2'}

        ],

      }

    }

    methods: {

      selectItem(item) {

        this.$router.push({

          path: `/recommend/${item.dissid}`

        })

      }

    }

  }

</script>

在这里我通过在recommend这个组件下实现二级路由跳转。首先渲染discList列表里面的数据，点击li标签跳转到第一步在index.js定义的Recommend组件下的子路由Disc。通过$router.push()这个方法，带上这条数据的唯一id值即可实现子路由跳转。

router.push()方法就是用来动态导航到不同的链接的。它会向history栈添加一个新的记录，点击<router-link :to="...">等同于调用router.push(...)。

5、router.go()的用法

router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

例子

// 在浏览器记录中前进一步，等同于 history.forward()

router.go(1)

// 后退一步记录，等同于 history.back()

router.go(-1)

// 前进 3 步记录

router.go(3)

// 如果 history 记录不够用，那就默默地失败呗

router.go(-100)

router.go(100)