VUE路由跳转

最新推荐文章于 2024-09-13 07:41:33 发布

原创最新推荐文章于 2024-09-13 07:41:33 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了VUE中使用routerindex.js配置路由的方法，并通过实例展示了不同方式的路由跳转，包括文字链接、a标签及router-link等。此外，还探讨了各种跳转方式的区别。

VUE路由跳转

router index.js

import Vue from 'vue'
import Router from 'vue-router'
import table from '@/views/personal/table'
Vue.use(Router)

//在路由添加的地方 添加路由信息
{
	path: '/table',
    meta: { title: '表格', icon: 'el-icon-set-up' },
    component: () => import('@/views/personal/table'),
},

目标组件 other.vue

<template>
    <div>
      <p>
        文字链接：
        <el-link href="/table" :underline="false" type="success">表格</el-link>
      </p>
      <p style="margin: 20px 0">
        a标签：
        <a href="/table" style="color: rgb(19, 206, 102)">表格</a>
      </p>
      router-link 不带参数 普通跳转：
      <router-link to="/table" style="color: rgb(19, 206, 102)">表格</router-link>
      <p class="tooltip">
        文字链接跳转比a标签慢很多，文字链接类似强刷。router-link是只跳转，不刷新页面
      </p>
    </div>
</template>

<script>
export default {
  name: "otherIndex",
};
</script>

点击按钮，打开一个新的页面

   let url = "http://localhost:9527/#/vertical-add";//这个是绝对地址，浏览器上的地址
      var iWidth = 1500; //弹出窗口的宽度;
      var iHeight = 845; //弹出窗口的高度;
      var iTop = (window.screen.height - 10 - iHeight) / 2; //获得窗口的垂直位置;
      var iLeft = (window.screen.width - 10 - iWidth) / 2; //获得窗口的水平位置;
      window.open(
        url,
        "_blank" , "height=" + iHeight +",innerHeight=" + iHeight + ",width=" + iWidth +
        ",innerWidth=" + iWidth + ",top=" + iTop + ",left=" + iLeft +","
      );

点击按钮，关闭当前页面

window.close();