SEO：搜索引擎优化，
前端路由：控制页面访问路径，单页面应用
后端路由：控制接口
一，实现前端路由的两种方式：
1，URL的hash,location.hash
2,HTML5的history模式，history.pushState(data,title,url)
二，router里的index.js文件
使用vue create '文件名'，创建一个vue脚手架，
vue create 文件名
vue.use(VueRouter),调用vue-router这个对象上面的install方法，注册两个属性在vue原型对象上，分别是vue.prototype.$router(整个项目的路由对象)和vue.prototype.$route(当前活跃的路由对象)
import VueRouter from 'vue-router'
Vue.use(VueRouter)
实例化一个VueRouter对象
import Home from '../home.vue'
new VueRouter({
mode:'history',
routes:[ //整个项目的路由规则
{
path:'/',
component:Home
}
]
})
router-link相当于a标签，跳转页面。router-view相当于一个占位符，把现在页面访问的路径内容加载进来，替换掉router-view
<router-lin to='/home'></router-lin>
<router-view/>
vueRouter跳转页面的方式有用this.$router.push('/home')，this.$router.replace()和用标签<router-lin>
三，路由传值
1最普遍的方式
this.$router.push('/home?key='+vaule+'&key1='+vaule1)。在另一个页面用this.$route.query获取传过来的值
this.$router.push('/home?key='+vaule+'&key1='+vaule1)
this.$route.query.key
2，另外三种方式
第一种
父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。
this.$router.push({
name: 'Describe',
params: {
id: id
}
})
接收参数
this.$route.params.id
第二种
父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
this.$router.push({
path: '/describe',
query: {
id: id
}
})
接收参数都是一样
第三种
getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
四，动态路由
在路由规则里定义如下
{
path:'/home/:pid',
component: Home
}
pid是一个变量，在用这个动态路由的时候可以
this.$router.push('/home/123')
五，路由懒加载
懒加载是当你点击一个页面时，先缓存所有的链接，不执行，只执行那个页面的资源，这样可以提升效率，提高响应速度。
路由懒加载很简单，在component用import引入组件，如下：
{
path: '/proDetail',
component : () =>import(/* webpackChunkName: "Cart" */
'../views/ProDetail.vue')
},
六，router,routes,route的关系
router相当于一个路由器，路由器里面有路由表，既routes，表中很多路由规则，route是routes的一个个路由规则
