Vue 路由 (vue-router)

1.什么是Vue Router？

Vue路由(Vue Router)通俗的说，就是Vue应用中的路径管理器，我们需要做的就是把Vue中的组件映射到路由上，让Vue Router知道在什么地方渲染他们

2.为什么要用Vue Router？

在Vue中，我们为什么不和传统页面应用一样直接用标签来进行页面间的跳转？
  在使用Vue创建的单页面应用中，在进行打包上线时，打包完成后，会生成一个dist文件夹，里面只存在一些静态资源和index.html页面，所以传统的标签是不起作用的，只能使用Vue Router进行页面间的跳转

3.Vue Router实现方式

更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：①：hash模式   ②：history模式  
  在Vue中，通过在Vue Router实例中配置mode来改变其实现方式，默认是hash模式
  区别：hash模式在浏览器地址栏会显示锚点链接形式，而history模式和正常网址格式相同

4.Vue Router的使用

1.安装 npm install vue-router -s
  2.在src目录下创建router目录，接着创建index.js文件
  3.在index.js文件中引入Vue以及路由 import VueRouter from ‘vue-router’
  4.挂载路由 Vue.use(VueRouter)
  5.创建路由对象并配置路由规则 const router = new VueRouter({routes: [{ path: ‘/home’, component: Home }]})
  6.将路由对象传递给路由实例，在main.js文件路由实例中添加router
  7.在app.vue中预留路由出口

index.js文件

// 引入依赖
import Vue from "vue";
import VueRouter from "vue-router"
import Home from "../components/Home.vue"
// 挂载
Vue.use(VueRouter)
// 创建实例并配置
const router = new VueRouter({
    routes: [
        { path: '/', redirect: '/home' },
        { path: '/home', component: Home }
    ]
});

// 导出
export default router

main.js文件

new Vue({
  // 让 vue 知道我们的路由规则
  router,
  render: h => h(App),
}).$mount('#app')

app.vue文件

<div id="app">
    <router-view></router-view>
</div>

注意：vue-router版本选择

5.Vue Router常用传参方式

Vue Router的传递参数一共分为两大类：
    ①：声明式导航传参   ②：编程式导航传参router.push()

1.声明式导航传参

// 通过 <router-link> 的to属性属性值拼接直接进行传参
// 父组件
    <router-link to = "/跳转路径/传入的参数"></router-link>
eg: <router-link to="/home/2/张三">GO Home!</router-link>

// 子组件
// 通过 this.route.params 接收参数
mounted() {
    console.log(this.$route.params)
}

// 路由配置
{ path: '/home/:id/:name', component: Home }

// 地址栏显示
http://localhost:8080/#/home/2/张三

注意：通过声明式导航传递方式参数，参数会直接显示在地址栏上

2.编程式导航传参
    ①.调用 $router.push()传参

// 父组件
// 绑定点击事件，实现跳转并传参
methods: {
        toPush(id) {
            this.$router.push({
                path: `/toPush/${id}`
            })
        }
    }

// 子组件
// 通过 this.route.params 接收参数
mounted() {
    console.log(this.$route.params)
}

// 路由配置
{ path: '/toPush/:id', component: toPush }

// 地址栏显示
http://localhost:8080/#/toPush/3

注意：与声明式导航传递方式参数相同，参数会直接显示在地址栏上

②.通过params传参

// 根据路由中name属性匹配路由，再根据params传参
methods: {
        toParams() {
            this.$router.push({
                name: toParams,
                params: {
                    id: 4,
                    name: '王五'
                }
            })
        }
    }

// 子组件接收参数
<h2>传入参数:{{'编号:'+this.$route.params.id+'-----'+'姓名:'+this.$route.params.name}}</h2>

// 路由配置
{ path: '/toParams',  name: toParams, component: toParams }

// 地址栏显示
http://localhost:8080/#/toParams

注意：通过params方式传参：1.地址栏不会出现参数   2.再次刷新页面数据会丢失

③.通过query传参

// 跟据路由中path属性匹配路由，在根据query传参
methods: {
        toQuery() {
            this.$router.push({
                path: '/toQuery',
                query: {
                    msg: "通过query传递的数据！"
                }
            })
        }
    }

// 子组件接收参数
<h2>传递数据：{{ this.$route.query.msg }}</h2>

// 路由配置
{ path: '/toQuery', name: toQuery, component: toQuery }

// 地址栏显示
http://localhost:8080/#/toQuery?msg=%E9%80%9A%E8%BF%87query%E4%BC%A0%E9%80%92%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%81

注意：通过query方式传参：1.地址栏会出现解析的地址   2.再次刷新页面数据也不会丢失

6.Vue Router二级路由的配置

什么是二级路由？二级路由就是在一级路由的基础上嵌套的又一层路由模式   为什么要使用二级路由和多级路由？
在Vue项目中会有很多个路由，同时也会又很多，如果不采用分级路由，多个会造成页面内容的显示混乱，这样对于用户交互是不友好的，所以要采用二级和多级路由

1.二级路由的配置

// 在一级路由的配置中添加 children 属性，属性值为一个数组
{ path: '/home', component: Home, children: [
            { path: '/home/secondRouter', component: secondRouter }
]}

// 在一级组件中添加二级路由的出口
<router-view></router-view>

注意：多级路由类似配置方式类似

7.Vue Router懒加载

什么是Vue Router懒加载？ 整个网页默认打开就加载全部内容，路由懒加载就是只加载你当前点击的那个模块   
为什么使用Vue
Router懒加载？ 在Vue应用中，项目和首屏加载过于缓慢，使用Vue Router懒加载按需加载资源，提高首屏的加载速度，对项目进行优化

// 原始方式
import Home from "../pages/Home"
// 懒加载方式
const Home = ()=>import('../pages/Home');

8. $route 和 $router 的区别

$router 是 VueRouter
的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，是一个全局对象，他包含了所有的路由包含了许多关键的对象和属性
$route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等我们可以从vue
devtools中看到每个路由对象的不同