Vue Router的学习总结

        Vue Router 是 vue.js 官方的路由管理器，它和 vue.js 是深度集成的，适合用于构建单页面应用，也是学习 vue 的必备技能。

1、Vue Router 的安装与使用

第一步：采用 npm 的方式进行安装，在终端输入下面命令安装 vue-router ：

注意：vue 和vue-router 的版本之间有对应关系。vue2 只能和 vue-router 3.x 使用，vue3只能和 vue-router 4.x 使用。如果安装 vue-router 不标注版本的话，会默认安装 vue-router 4.x的版本，我们可以在 package.json 文件里查看到 vue-router 的安装版本信息。

// 默认 vue-router 安装版本
npm i vue-router

// 指定 vue-router 安装版本，@后面加指定的版本号
npm i vue-router@3.5.2

第二步：通过 Vue.use() 明确地安装路由功能，能够在一个模块化工程中可以使用它。在 src 目录下新建 router/index.js 路由模块，代码如下：

// 配置路由相关信息
import Vue from "vue";
import VueRouter from "vue-router";

// 通过Vue.use(插件)，把VueRouter安装为Vue的插件
Vue.use(VueRouter);

// 创建VueRouter对象
const routes=[]

// 配置路由与组件之间的应用关系
const router = new VueRouter({
    routes,
    // 使用HTML5的history模式
    mode: 'history'
})

// 将router对象传入到Vue实例
export default router

第三步：导入并挂载到 Vue 实例中。在 src/main.js 入口文件中挂载路由模块，代码如下：

import Vue from 'vue'
import App from './App.vue'
// 引入路由规则
import router from './router'

Vue.config.productionTip = false

new Vue({
  // 注册路由
  router,
  render: h => h(App),
}).$mount('#app')

 2、<router-link> 和 <router-view>

        <router-link> 和 <router-view> 是 Vue Router 中常用的组件。

<router-link> 使用方法：

        <router-link> 用于生成可点击的链接，它会自动将目标路由转换为 href 属性，并渲染成 <a> 标签。代码如下：

<!-- to属性指向目标路由路径 -->
<router-link to="/">Home</router-link>
<router-link to="/login">Login</router-link>

<router-view> 使用方法：

        <router-view> 用于渲染当前路由匹配到的组件，根据路由规则，可以匹配不同的组件并将其渲染到 <router-view> 中。通常情况下，我们会把 <router-view> 放在 App.vue 中。 代码如下：

<!-- router-view不需要任何属性，只需简单地放置在需要加载组件的地方即可 -->
<router-view></router-view>

3、编程式的导航

        定义导航链接不仅可以用 <router-link> 创建 <a> 标签来实现，还可以借助 router 的实例方法，通过编写代码来实现。
        使用<router-link>标签的方式来进行跳转，这是一种提前约定好跳转位置的方式，这种方式为“声明式”。很多时候我们需要在点击链接的时候，触发一个方法，来根据不同的情况进行不同页面的跳转，vue-router 提供了这种方法，而这种方式触发的路由跳转为“编程式”。
        vue-router 提供的路由跳转方法为 router.push 方法：

this.$router.push('/register')

4、路由懒加载

        在路由中，若不运用路由懒加载，会有很多页面都会打包到同一个js文件中，文件将会异常的大，从而造成进入首页时，需要加载的内容过多，时间过长，降低用户体验；若运用路由懒加载，则一开始进入页面时不需要一次性把资源都加载完，而是在需要时才加载对应的资源。因此，路由懒加载是能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。

方式对比：

（1）引入组件后直接在路由中配置：组件属于静态引入，无论组件是否使用，组件都已经加载了，加重渲染性能。

import loginVue from '../views/loginVue'
const routes = [
    {
        path: '/loginVue',
        name: 'loginVue',
        component: loginVue 
    } 
]

（2）采用路由赖加载的方式：组件属于动态引入，组件需要时在加载组件。

const routes = [
    {
        path: '/loginVue',
        name: 'loginVue',
        component: () =>
            import ('../views/loginVue')
    }
]

5、嵌套路由

        嵌套路由又称子路由，通常由多层嵌套的组件组合而成，在一个被路由过来的页面下可以继续使用路由，可以理解为是路由中的路由的意思。

嵌套路由的使用：

（1）创建用户个人信息组件，在 views/user 目录下创建一个名为 userFile.vue 的视图组件，代码如下：

<template>
  <h1>用户个人信息</h1>
</template>

<script>
  export default {
    name: "userFile"
  }
</script>

<style scoped>
</style>

（2）创建用户列表组件，在 views/user 目录下创建一个名为 userList.vue 的视图组件，代码如下：

<template>
  <h1>用户列表</h1>
</template>

<script>
  export default {
    name: "userList"
  }
</script>

<style scoped>
</style>

（3）修改首页视图，我们修改 homeVue.vue 视图组件，此处使用了 ElementUI 布局容器组件，代码如下：

<template>
    <div>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-openeds="['1']">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                <!--插入的地方-->
                  <router-link to="/user/profile">个人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                <!--插入的地方-->
                  <router-link to="/user/list">用户列表</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
              <el-menu-item-group>
                <el-menu-item index="2-1">分类管理</el-menu-item>
                <el-menu-item index="2-2">内容列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
 
        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>
          <el-main>
          <!--在这里展示视图-->
            <router-view />
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
    export default {
        name: "homeVue"
    }
</script>

<style scoped lang="scss">
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    color: #333;
  }
</style>

（4）添加了组件，去router修改配置文件，代码如下：

import Vue from 'vue';
import VueRouter from 'vue-router';
//导入组件
import homeVue from "../views/homeVue";
import loginUser from "../views/loginUser";
//导入子模块
import userList from "../views/user/userList";
import userFile from "../views/user/userFile";
 
//使用
Vue.use(VueRouter);

//导出
export default new VueRouter({
  routes: [
    {
      //登录页
      path: '/homeVue',
      component: homeVue,
      //  写入子模块
      children: [
        {
          path: '/user/userFile',
          component: userFile,
        }, {
          path: '/user/userList',
          component: userList,
        },
      ]
    },
    //首页
    {
      path: '/loginUser',
      component: loginUser
    },
  ]
})