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)
