vue-router

Vue Router 是 Vue.js 官方的路由管理器。

安装

安装vue-router

npm install vue-router --save

导入

1. main.js内导入路由插件对象，并且调用Vue.use()引用插件
2. router.js内创建router实例，传入映射关系配置
3. 在Vue实例中挂载router实例

//引入Vue和vue-router
import Vue from 'vue'
import Router from 'vue-router'

//调用Vue.use()引用插件
Vue.use(Router)

export default new Router({
    //routes内配置路由和组件映射关系
    routes:[]
})

创建vue-router实例

配置映射关系
在router.js路由内，配置路径（path）和组件（ component）之间的对应关系：

//引入组件模块
import Home from './views/Home.vue'
import About from './views/About.vue'

routes: [
    {
      //设置对应关系
      path: '/',
      component: Home
    },
    {
      //设置对应关系
      path: '/about',
      component: About
    }
]

路径之间可以进行重定向，比如把入口页进行重定向：

{
  path: '/',
  redirect:'/home'
},

这样，首次进入页面时，路径'/'会改为'/home'，进入/home页。

挂载router实例

配置router组件
在App.vue组件内，对应路由的配置，创建router组件：

<div id="nav">
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
</div>

<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

router-link默认会被渲染成一个a标签,可以添加tag属性改为其他标签：

<router-link to="/" tag="button">Go to Home</router-link>

vue能检测到处于激活（active）状态的router-link，给它添加classrouter-link-active。

路由命名
创建路由实例时，还可以给路由实例添加name:string属性来命名路由，这样，直接指向这个名字就能访问该路由，例如router-link的to属性：

<router-link to="{name:string}">Go to About</router-link>

例如路由重定向：

routes: [{ path: '/', redirect: { name: string }}]

router对象
使用this.$routerAPI可以访问到App全局路由对象，使用this.$routeAPI可以访问到App全局路由内处于激活（active）状态的对象。
组件内的 this.routeAPI可以访问到该组件的路由对象。

keep-alive组件
keep-live是Vue的内置组件，能够保存所包含组件的缓存状态，避免重新渲染。
使用keep-live包裹router-view可以将页面的状态保存下来，再次进入时不主动进行刷新。
在keep-live内渲染的页面组件会增加两个回调函数：

activated() //页面组件活跃时回调
deactivates()  //页面组件失去活跃时回调

两个属性：
include:String/regexp 只有匹配的组件被缓存
exclude:String/regexp 只有匹配的组件不被缓存