vue-router笔记

　　什么是vue-router？ 那么就先要知道什么是router。 和node类似，通俗的理解router就是对应不同的请求，导航到不同的部分。 而我们在学习vue的时候为什么要学习vue-router呢？ 因为vue的主要用处在于创建单页面应用（SPA），所以路由就非常重要，而管理路由的工具就是使用vue-router，通过它我们可以更好的控制路由。

　　既然知道了vue-router的作用和好处，那么接下来我们就谈谈怎么使用vue-router。我们将通过下面的简单的例子来学习。更多的推荐看一遍vue-router的官方文档， 其实先看完这篇文章，然后再去看文档就会更加容易和系统了。

我们默认已经引入了vue和vue-router模块。

html部分：

<div id="app">
    <div class="content">
        <router-link to="/goods">商品</router-link>
        <router-link to="/ratings">评论</router-link>
        <router-link to="/seller">商家</router-link>
    </div>
    <router-view></router-view>
</div>

js部分：

// 首先定义或者引入路由的组件
// 方法一：直接定义路由组件
const goods = { template: '<p>goods</p>' };
const ratings = { template: '<p>ratings</p>' };
const seller = { template: '<p>seller</p>' };
// 方法二：import引入路由组件
import goods from 'components/goods/goods';
import ratings from 'components/ratings/ratings';
import seller from 'components/seller/seller';
// 然后定义路由(routes)，components还可以是Vue.extend()创建的
const routes = [
  { path: '/goods', component: goods },
  { path: '/ratings', component: ratings },
  { path: '/seller', component: seller }
];
// 接着创建路由实例
const router = new VueRouter({
  // ES6缩写语法，相当于routes:routes
  routes  
});
// 最后创建vue实例并挂载
const app = new Vue({
  el: '#app',
  router
});
// 或者
const app = new Vue({
  router
}).$mount('#app')

ok！ 这就是一个最基本的框架可以完成单页面应用的任务了。 下面进行详细的解释。

router-link基本介绍

这是一个组件，通过这个组件我们可以渲染出一个a标签，这个组件中的to可以相当于a标签中的href导航到一个页面。 并且router-link渲染出来的标签会自动添加一个类名.router-link-active。

router-link属性配置

to 

这是一个必须的属性，表示路由的连接，它的形式可以是下面这样的：

<router-link to="goods"></router-link>
<router-link to="{path='goods'}"></router-link>

即一个字符串或者是一个表示位置的路径对象。

replace

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

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

tag

router-link默认渲染为a标签，但是如果我们希望它渲染成别的标签，就可以使用tag来设置

<!-- 渲染成li标签 -->
<router-link to="goods" tag="li"></router-link>

router-view

这个组件时渲染到的位置。它可以配合keep-alive使用，即这个组件会一直存在这样可以提高性能。

路由组件的引入

在js中我们使用了两种方法来引入组件，一种是直接定义这个组件，即使用const goods = { template: '<p>goods</p>' };的形式，但是显然这种形式由于只能定义简单的组件是不可能满足我们实际开发的。 所以我们常常使用的方式使用import的形式引入.vue的组件，这样的组件更常用、更符合实际的开发。

路由的创建过程

即首先要定义、引入各组件，然后在定义路由，即不同的get请求引导到不同的组件，接着就是通过VueRouter创建路由实例，最后就是将这个路由实例挂载到Vue实例中，并且我们可以看到两种不同的挂载方式。 

如何实现不同路由、不同页面标题？

因为使用vue做的是单页面SPA，所以title永远都是同一个，我们怎么才能做到路由切换的同时切换title呢？ 举例如下：

// 定义路由的时候如下定义，name也可为中文
const routes = [
  { path: '/goods', component: goods, name: 'goods' },
  { path: '/ratings', component: ratings, name: 'ratings' },
  { path: '/seller', component: seller, name: 'seller' }
];
// 创建路由实例
const router = new VueRouter({
  routes: routes
})
// 关键在这里，设置afterEach钩子函数
router.afterEach((to, from, next) => {
  document.title = to.name;
})

即关键之处在于在创建路由时添加了不同的name，然后使用router实例的afterEach函数， 即路由导航结束之后就会调用这个函数，这里使用了es6的用法，其中to表示当前组件， from表示上一个组件，next表示下一个组件。 这样，我们就可以实现不同路由，不同页面标题了。

如何刚进入就渲染某个路由组件？

刚进入应用都是进入到“/”这个路由的，如果想直接进入到“/goods”怎么办，这里提供两种方法。一种是利用重定向，另一种是利用vue-router的导航式编程。

重定向

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

导航式编程

// 在创建vue实例并挂载后调用
router.push('/goods')

vue单文件组件

　　什么是单文件组件？ vuejs 自定义了一种.vue文件，把html, css, js 写到这一个文件中，实现了对一个组件的封装， 一个.vue 文件就是一个单独的组件。由于.vue文件是自定义的，浏览器不认识，所以需要对该文件进行解析。 在webpack构建中，需要安装vue-loader 对.vue文件进行解析。在 sumlime 编辑器中，我们 书写.vue 文件，可以安装vue syntax highlight 插件，增加对文件的支持。

 

 这就是一个单文件组件。其中的template就是模板。 js是操作模板中的数据。style用于定义样式，scoped表明这里写的css 样式只适用于该组件，可以限定样式的作用域。

　　我们为什么需要单文件组件？ 它的好处是什么？  因为组件的使用不可能是非常简单的， 所以我们希望使用.vue的形式将每一个模块的组件分隔开来。