Vue-router

1. vue-router的基本使用过程：

【1】在vue CLI + webpack项目目录中，创建一个vue-router文件夹，在此文件夹下创建index.js，用来配置vue-router

【2】index.js中：(1) 导入组件

const Home = () => import('../views/home/Home'); // 此处使用了 '路由懒加载'

(2) 创建路由 routes

const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  }
];

(3) 配置路由 new VueRouter({ ... })

const router = new VueRouter({
  routes,
  mode: 'history'
});

(4) 导出并挂载根组件实例

src/router/index.js 中

export default router

src/main.js 中

import router from './router'

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

  注意：在使用VueRouter时，需要依赖Vue，代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

2. 区分：this.$router 是 router 路由器对象

this.$route 是当前路由组件对象

3. 动态路由匹配：

【1】在router/index.js中，routes配置path时，若path格式为: /user/:id 即以【动态路径参数】冒号 跟一个参数名结束，则匹配到一个路由时，id会被保存到this.$routes.params中.

  { // src/router/index.js
    path: '/profile/:id',
    component: Profile
  }

<template> // profile.vue 
  <div><h2>Profile:{{this.$route.params.id}}</h2></div>
</template>

【2】响应路由参数的变化：导航守卫，简单说即从user/zhangsan路由到user/lisi，为了保持高效率，vue-router会复用组件，

这会导致组件的生命周期钩子函数不会被调用，如果希望调用，则需要导航守卫.【后续再说明】

4. 嵌套路由：

【1】在路由中使用children属性，其值为一个数组，数组内是用于配置路由的对象：

  {
    path: '/profile',
    component: Profile,
    children: [
      {
        path: 'news',
        component: News
      }
    ]
  }

【2】神坑：component而不是components，我找bug找了一个小时...【只有你需要传入很多component时，使用对象时，才是components，可以结合 7. 命名视图 + 嵌套路由 理解】

注意点：（1）父路由中path前需要加 '/' ，子路由不需要加 '/'

(2)子路由组件[News]显示需要在父路由组件[Profile]中添加router-view标签！

(3)在父路由中如果使用router-link，to的路径应为完整路径：'/profile/news'【在Vue Router 4中 to 属性已被废弃】

5. 编程式路由：https://router.vuejs.org/zh/guide/essentials/navigation.html【Vue-Router官方文档地址】

　　【1】this.$router.push()：括号内可以使路由地址字符串，也可以是一个描述路由地址的对象，分为三种情况：

　　（1）name + params，使用命名路由，并且提供params【此处如果使用params，则必须在routes中配置动态路由，并且和params属性名一致】

    <button @click="btnClick2">点我跳转到shopcart[name+params]</button>

      btnClick2() {
        this.$router.push({
          name: 'shopcart', 
          params: { userId: '123' }
        });
      },

路由配置文件：

  {
    path: '/shopcart/:userId',
    name: 'shopcart',
    component: ShopCart
  }

效果为地址栏：http://localhost:8080/shopcart/123

　　（2）path + params，这时params无效

　　（3）path + query，携带查询参数

    <button @click="btnClick4">点我跳转到shopcart[path+query]</button>

      btnClick4() {
        this.$router.push({
          path: 'shopcart',
          query: {
            id: 17
          }
        })
      }

效果为地址栏：http://localhost:8080/shopcart?id=17

　　【2】this.$router.replace()：效果与push基本相同，但使用replace时，浏览器在跳转时不会在history栈中添加地址，因此不具备返回上一个网页功能.

　　【3】this.$router.go()：小括号内参数为数字，代表在history地址栈中，往前多少个页面或回退多少个页面.

6. 命名路由：

在5. 编程式路由中已经提到，即给routes中配置的路由，添加name属性，可以在$router.push中使用name + params 方式进行路由跳转.

【命名路由 + 嵌套路由 ？】

7. 嵌套路由 + 命名视图：

【1】在index.js中：

 {
    path: '/profile',
    component: Profile,
    children: [
      {
        path: 'news',
        components: {
          default: News,
          a: Messages
        }
      }
    ]
  }

【2】Profile.vue 命名视图

<template>
  <div>
    <button @click="btnClick_default">default跳转到News</button>
    <router-view name="a"></router-view>
    <router-view></router-view>
  </div>
</template>

    methods: {
      btnClick_default() {
        this.$router.push('profile/news')
      }
    }

实现了将News组件和Messages组件中的内容都显示了出来，分别显示在两个router-view中.