vue路由router,routes,route

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

vueRouter跳转页面的方式有用this.$router.push('/home')，this.$router.replace()和用标签

三，路由传值

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的一个个路由规则