Vue的vue-router基本使用

一、Vue-router是什么?

　　Vue Router是Vue.js的路由管理器。和Vue.js的核心深度集成，是SPA单页应用的路径管理器，适合用于构建单页面应用。Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来；传统的页面应用，是用一些超链接来实现页面切换和跳转的；在Vue-router单页应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系；

　　实现原理：单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而只是更新某个指定的容器中的内容。核心是：更新视图而不重新请求页面；前端路由又两种方式；详情：https://www.cnblogs.com/xsk-walter/p/12663694.html

　　Vue Router 的功能：官方文档：

　　　　1：嵌套路由/视图；

　　　　2：模块化的、基于组件的路由配置；

　　　　3：路由参数、查询、通配符；

　　　　4：基于Vue.js过渡系统的视图过渡效果；

　　　　5：自定义的滚动条行为；

　　　　6：H5的history模式和Hash模式

二、Vue-router的使用方式

　　1：下载： npm install vue-router -S

　　2：在main.js中引入：import VueRouter from 'vue-router'

　　3：安装插件Vue.use(VueRouter)

　　4：创建路由对象并配置路由：const router = new VueRouter({ routes: [ { path: '/home', component: Home } ] })

　　5：将其路由对象传递给Vue的实例

　　6：在入口文件中留坑：<router-view></router-view>

// 在main.js文件中引入
import Vue from 'vue'
import VueRouter from 'vue-router'

// 安装插件
Vue.use(VueRouter)

// 创建路由对象并配置路由规则
const router = new VueRouter({
    routes: [{}]
})

// 启动
new Vue({
    el: '#app',
    router,
    render: c => c(App) 
})

// app.vue
<template>
    <div id="app">
        <router-view></router-view> // 留坑
     </div>
</template>

三、基础

　　1：动态路由匹配

　　　　我们经常需要把某种模式匹配到所有的路由，全部映射到同个组件

const User = {
    template: '<div>User</div>'
}
// 动态路由参数以冒号开头
const router = { 
    routes: [{ path: 'user/:id', component: User }]
}
// 像/user/123和/user/456都将映射到同一个路由；

　　一个路径参数使用冒号标记，当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用；

　　其中$route对象还提供了其他有用的信息；

　　## 正则在url传值的作用：path: 'user/:id(\d+)'　　加入了正则，只能传递数字类型的id，否则组件接收不到；

　　## 注意：当使用路由参数时，从/user/123导航到user/456时，原来的组件实例会复用；此时组件的声明周期钩子就不会再被调用；复用组件时，相对路由参数的变化做出相应的话，你可以简单的watch监听$route对象或者导航守卫；

　　## 404页面设置和捕获所有路由：

// 设置404页面
{ path: '*', component: Error }
// 新建404页面
<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
</script>
// 当路由不存在时，会进入到404页面

　　　##如果想要匹配到任意路径：可以使用通配符*；当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分

　　2：编程式和声明式导航　详情见：https://www.cnblogs.com/xsk-walter/p/12663615.html

　　3：命名路由

　　　　# 通过一个名称来标识一个路由显得很方便，特别是在链接一个路由或者执行一些跳转的时候；可以在创建router实例的时候，在routes配置中给某个路由设置名称；　

// 链接到一个路由
<router-link :to="{ name: 'user' , params: { userId: 123 }}">User</router-link>
// 编程式跳转
this.$router.push({ name: 'user', params: { userId: 123 } })
// 两种方式都会把路由导航到 /user/123

　　4：路由组件传参

　　　　# 三种模式： 布尔模式、对象模式和函数模式

　　　　1：布尔模式：由于普通组件和路由组件传参形式不同，路由组件传参布尔模式需要在route中添加props:true,会把params中的键值对以props的形式传入组件中，使普通组件当做路由组件使用；

　　　　## 详细请参考：https://www.jianshu.com/p/a8d919283fec

　　官方文档：https://router.vuejs.org/zh/