1、前端路由
后端路由：多页面，服务器端渲染好返回给浏览器。
前端路由：改变url不向服务器发送请求；前端可以监听url变化；前端可以解析url并执行相应操作。
前后端分离：后端只提供API来返回数据，前端通过ajax获取数据后，在通过一定的方式渲染到页面上。
SPA：前后端分离+前端路由。
SPA只有一个html文件，整个网站的所有内容都在这一个html里，通过js来处理。
2、vue-router
路由不同的页面实时上就是加载不同的组件。
3、示例
github地址：https://github.com/MengFangui/VueRouter
需要安装vue-router
（1）加载插件
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './app.vue';
//加载vue-router插件
Vue.use(VueRouter);
注意：from后的模块都是小写。
（2）路由设置
// 路由配置,配置路由匹配列表
//webpack会把每一个路由打包为一个js文件，在请求该页面时，加载这个页面的js，异步实现懒加载（按需加载）
const Routers = [
{
//匹配的路径
path: '/index',
//
meta: {
title: '首页'
},
//映射的组件
component: (resolve) => require(['./views/index.vue'], resolve)
},
{
path: '/about',
meta: {
title: '关于'
},
component: (resolve) => require(['./views/about.vue'], resolve)
},
{
//路由到同一个页面，数据不同
path: '/user/:id',
meta: {
title: '个人主页'
},
component: (resolve) => require(['./views/user.vue'], resolve)
},
//访问的路径不存在时，重定向到首页。
{
path: '*',
redirect: '/index'
}
];
const RouterConfig = {
// 使用 HTML5 的 History 路由模式，通过‘/’设置路径
mode: 'history',
routes: Routers
};
const router = new VueRouter(RouterConfig);
注意：path属性值后有'/'.
component: (resolve) => require(['./views/user.vue'], resolve)
resolve实现异步加载，按需加载。 命名路由使用：
{
//匹配的路径
path: '/index',
//常量参数定义
meta: {
title: '首页'
},
//命名路由
name:'index',
//映射的组件
component: (resolve) => require(['./views/index.vue'], resolve)
}
<router-link :to="{name:'about'}">跳转到 about</router-link>
命名路由的配置好处是：路径都在main.js中配置好了，改变路径的话只需要在main.js中配置即可，不需要在所有使用的地方进行配置。
（3）将将每个页面的样式都打包到一个css文件，webpack.config.js
plugins: [
//css单独打
new ExtractTextPlugin({
filename: '[name].css',
//将每个页面的样式都打包到一个css文件
allChunks: true
})
]
（4）配置webpack-dev-server支持history路由
"scripts": {
"dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",
"bulid": "webpack --progress --hide-modules --config webpack.prod.config.js"
},
--history-api-fallback 所有的路由都指向index.html （5）挂载路由组件
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default { }
</script>
（6）跳转
方式1：
<template>
<div>
<h1>首页</h1>
<!--router-link会渲染为一个a标签 实现跳转的方式1-->
<!--router-link 的tag属性 指定渲染成什么标签-->
<!--router-link 的replace属性 不会留下history记录，不能使用后退键-->
<!--router-link 的active-class属性 路由匹配成功时会自动给当前元素设置为一个名为router-link-active的class-->
<router-link to="/about">跳转到 about</router-link>
</div>
</template>
<script>
export default { }
</script>
to是一个属性，同样可以使用v-bind进行动态设置。如：
<router-link :to="{name:'about'}">跳转到 about</router-link>
方法二：
<template>
<div>
<h1>介绍页</h1>
<button @click="handleRouter">跳转到 user</button>
</div>
</template>
<script>
export default {
methods: {
handleRouter () {
//实现跳转的方式2
this.$router.push('/user/123');
//不会向history添加新纪录
//this.$router.replace('/user/123');
//在hsitory中前进或者后退多少步
this.$router.go(-1);
}
}
}
</script>
（7）导航钩子
//导航钩子，beforeEach路由改变前触发
//to形参 即将进入的路由对象
//from 即将离开的路由对象
//next 调用改方法后才能进入下一个钩子，设置为false时，可以取消导航，设置为具体路径时可以导航到指定的页面next(‘/login’)
router.beforeEach((to, from, next) => { window.document.title = to.meta.title; next(); });
//导航钩子，afterEach路由改变后触发
router.afterEach((to, from, next) => { window.scrollTo(0, 0); });
next(false):next的参数设置为false时，取消导航/跳转效果。
（8）虚拟DOM
new Vue({
el: '#app',
router: router11,
render: h => {
return h(App)
}
});
注意：Vue 在创建 Vue 实例时，通过调用 render 方法来渲染实例的 DOM 树。
h就是createElement,只是换了一个名称。
Vue 在调用 render 方法时，会传入一个 createElement 函数作为参数，也就是这里的 h 的实参是 createElement 函数，然后 createElement 会以 APP 为参数进行调用
（9）Vue组件需要一个标签进行包裹（如div）
<template>
<div>
<h1>首页</h1>
<!--router-link会渲染为一个a标签 实现跳转的方式1-->
<!--router-link 的tag属性 指定渲染成什么标签-->
<!--router-link 的replace属性 不会留下history记录，不能使用后退键-->
<!--router-link 的active-class属性 路由匹配成功时会自动给当前元素设置为一个名为router-link-active的class-->
<router-link to="/about">跳转到 about</router-link>
</div>
</template>