Vue基础--使用路由时的部分功能

1. 路由设置为 history 模式
   可以通过url访问到自定义的路由，并且可以通过前后来倒退前进网页，设置格式

mode: 'history'

而hash模式不能通过url访问到自定义路由，url只会读取#以后的部分。
2. 通过点击标签实现跳转到指定路由

<!-- :index="item2.path" 作用就是当点击当前标签时，跳转到指定路由 -->
        <!-- 动态设置calss属性是为了当我们通过url切换窗口时实现标签高亮效果 -->
        <!-- $route为获取当前路由的信息，$router为获取Router对象的全部信息 -->
         <el-menu-item v-for="(item2, index) in item.children" :key="index" :index="item2.path"
          :class="$route.path==item2.path?'is-active':''">{{item2.name}}</el-menu-item>

3. 通过push的方式切换路由同时可传参

row为一个对象

this.$router.push({
        path: 'BookChange',
        query: {
          id: row.id,
          name: row.name,
          author: row.author
        }
      })

注意：这里是使用$router进行push

这种形式传参将会在url中传入指定参数

接收数据可直接通过query访问
注意：接受数据是使用当前路由，即$route来接收

this.ruleForm.id = this.$route.query.id
this.ruleForm.name = this.$route.query.name
this.ruleForm.author = this.$route.query.author

4. 重新加载当前页面

// 重新加载当前页面
window.location.reload()