Vue-router2.0学习笔记

首先需要安装npm install vue-router

然后在Main.js中使用

import Vue from ‘vue’
import VueRouter from ‘vue-router’
Vue.use(VueRouter)

我一般都是使用模块化编程的形式，用.vue单文件，先上例子

1.先看结构

2.BlogHeader.vue

3.App.vue

4.ShowBlog.vue

5.SingeBlog.vue

6.Router.config.js

7.main.js

以上就是实现路由的主要代码

接下来对里面的个别代码做些说明

①router-link
从上面例子中的书写形式就可以看出，router-link是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。
注意：被选中的router-link将自动添加一个class属性值.router-link-active。

②replace

一个布尔类型，默认为false。如果replace设置为true，那么导航不会留下history记录，点击浏览器回退按钮不会再回到这个路由。

<router-link to="/blog" replace></router-link>

③tag

router-link默认渲染成a标签，也有方法让它渲染成其他标签，tag属性就用来设置router-link渲染成什么标签的。

<router-link to="/blog" tag="li"></router-link>

④active-class

上面说了被选中的router-link将自动添加一个class属性值.router-link-active，这个属性就是来修改这个class值的。

⑤router-view
这个组件十分关键，它就是用来渲染匹配到的路由的。
可以给router-view组件设置transition过渡，具体用法见Vue2.0 Transition常见用法全解惑。
还可以配合使用，keep-alive可以缓存数据，这样不至于重新渲染路由组件的时候，之前那个路由组件的数据被清除了。比如对当前的路由组件a进行了一些DOM操作之后，点击进入另一个路由组件b，再回到路由组件a的时候之前的DOM操作还保存在，如果不加keep-alive再回到路由组件a时，之前的DOM操作就没有了，得重新进行。如果你的应用里有一个购物车组件，就需要用到keep-alive。

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

⑥重定向

const routes = [
  { path: '/', redirect: '/blog'}
]

⑦导航式编程

利用vue-router的导航式编程的router.push方法也可以实现上面的需求。

// 在创建vue实例并挂载后调用

router.push('/blog')

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

vue-router中还有router.replace方法和router.go方法，概念及用法可参考https://router.vuejs.org/zh-cn/essentials/navigation.html。