vue使用路由router-view

这篇具有很好参考价值的文章主要介绍了vue使用路由router-view。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言: router-viewNavMenu 导航栏的配合,在 web 应用中极为常见。其原理就是采用 SPA(single-page-application) 模式,就是只有一个 Web 页面的应用,通过 router 来控制页面的刷新和迭代。

提示: 以下示例基于 vue2.6.14 版本,vue-router3.5.2 版本,element-ui2.15.12 版本。
好了,废话不多说,我们直接贴上全部代码

一、创建vue页面与js脚本

1、 如下图,我们在项目的 src 目录里,新建 router 文件夹,并创建 index.js 文件。新建 views 目录,并把我们的 vue 页面全部放在这里。
vuerouter-view,h5,vue.js,前端
2、 其中每个 index.vue 的内容都很简单,只有一行文字

<template>
  <div>view-1</div>
</template>

<script>
/* eslint-disable */
export default {
  name: 'view-1',
  mounted() {
  },
}
</script>

3、 另外 package.json 的依赖关系也一并贴上, 至此可以执行 npm install 来安装依赖库
vuerouter-view,h5,vue.js,前端

二、编写脚本

1、编辑router目录的index.js文件 (这里只做了二级目录的深度)

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

/*
* 我们在项目中使用router.push或router.replace时,如果在A界面继续跳转A界面,就会抛出异常报错。
* 这里处理一下捕获异常的逻辑,就可以避免报错了。
*/
const originPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originPush.call(this, location).catch(err => err);
}

const originReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
  return originReplace.call(this, location).catch(err => err);
}

const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/view-1",
      name: "view-1",
      component: { render: e => e("router-view") }, // 这里就是将children的内容渲染到页面上
      meta: { title: 'view-1', keepAlive: true, icon: "el-icon-document-copy" },
      children: [
        {
          path: "/view-1/view-1-1", // 这个path可以去掉 /view-1,这里只是方便知道其从属关系
          name: "view-1-1",
          component: () => import('@/views/view-1-1'),
          meta: { title: 'view-1-1', keepAlive: true, icon: "el-icon-film" },
        },
        {
          path: "/view-1/view-1-2",
          name: "view-1-2",
          component: () => import('@/views/view-1-2'),
          meta: { title: 'view-1-2', keepAlive: true, icon: "el-icon-bank-card" },
        }
      ],
    },
    {
      path: "/view-2",
      name: "view-2",
      component: { render: e => e("router-view") },
      meta: { title: 'view-2', keepAlive: true, icon: "el-icon-connection" },
      children: [
        {
          path: "/view-2/view-2-1",
          name: "view-2-1",
          component: () => import('@/views/view-2-1'),
          meta: { title: 'view-2-1', keepAlive: true, icon: "el-icon-odometer" },
        }
      ],
    },
    {
      path: "/view-3",
      name: "view-3",
      component: () => import('@/views/view-3'),
      meta: { title: 'view-3', keepAlive: true, icon: "el-icon-truck" },
    },
  ]
});
export default router;

2、编辑项目的main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';

// 引入并使用element-ui
import * as element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/display.css';

Vue.config.productionTip = false;
Vue.use(element);

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

2、编辑项目的App.vue

<template>
  <div id="app">
    <el-menu
      :default-active="this.$route.path"
      class="el-menu-vertical-demo"
      router
      unique-opened
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <div v-for="(routeItem, routeIndex) in routes" :key="routeIndex">
        <el-submenu v-if="routeItem.children && routeItem.children.length > 0" :index="routeItem.path">
          <template slot="title"><i :class="routeItem.meta.icon"></i><span>{{ routeItem.meta.title }}</span></template>
          <el-menu-item
            v-for="(subItem, subIndex) in routeItem.children"
            :index="subItem.path"
            :key="subIndex"
            @click="handleShowItem(subItem)"
          >
            <template slot="title"><i :class="subItem.meta.icon"></i><span>{{ subItem.meta.title }}</span></template>
          </el-menu-item>
        </el-submenu>
        <el-menu-item v-else :index="routeItem.path" @click="handleShowItem(routeItem)">
          <template slot="title"><i :class="routeItem.meta.icon"></i><span>{{ routeItem.meta.title }}</span></template>
        </el-menu-item>
      </div>
    </el-menu>
    
    <router-view></router-view>
  </div>
</template>

<script>
/* eslint-disable */
import router from "./router";
export default {
  name: 'App',
  data() {
    return {
      routes: [],
    }
  },
  mounted() {
    this.routes = this.getRouter();
  },
  methods: {
    getRouter() {
      // 获取router的配置信息
      let { routes = [] } = router.options;
      return routes;
    },
    handleShowItem(item) {
      // 点击导航栏,切换页面
      this.$router.push({
        path: item.path
      })
    }
  },
}
</script>

<style>
#app {
  height: auto;
}
</style>

其中,如果 router 里配置的 children 不存在,我们直接使用 el-menu-item 来显示,如果 children 有值,就使用 el-submenu 来处理目录级别,但其最终还是要用 el-menu-item 来显示标题内容。另外,我们还要加上 router-view,这个标签才会把路由里对应的组件渲染出来。

三、运行与查看

我们已经执行过了 npm install 了,这里直接执行 npm run serve 启动项目,并查看,如下图(没有做任何的样式调整,界面有些不好看):
点击 view-1-2,下方白色区域的内容变成了 view-1-2/index.vue 的内容。
vuerouter-view,h5,vue.js,前端
点击 view-3,下方白色区域的内容变成了 view-3/index.vue 的内容。
vuerouter-view,h5,vue.js,前端

结语

以上内容就可以实现如题所示的问题,希望对你有所帮助文章来源地址https://www.toymoban.com/news/detail-641340.html

到了这里,关于vue使用路由router-view的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 中路由Vue Router 的使用

    在编写vue里的SPA(Single Page Application单页面应用)时,我们始终绕不开路由的使用,vue-router4.0版里有一些重要更新,在这里分享给大家。 vue-router是vue.js官方给出的路由解决方案,能够轻松的管理SPA项目中组件的切换 Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让

    2024年02月02日
    浏览(36)
  • vue3中使用router路由实现跳转传参

    大家好,今天和大家分享一下vue3中如何进行跳转并进行传参。 vue3取消了vue2部分api,所以路由跳转和传值的方式会有所不同。 我们今天主要讲router.push(location, onComplete?, onAbort?) vue3中新增API:useRouter和useRoute 1.首先在需要跳转的页面引入API—useRouter 2.在跳转页面定义router变量

    2023年04月09日
    浏览(42)
  • Vue中router-view无法显示

    如果你存在: 代码没报错,运行成功,但是index.js中router挂接的内容无法显示, 没有犯书写错误,routes 和 component 没有写错, 在浏览器中检查,App.vue中对应的 router-view为空 那么建议你接着看,首先, 正确的结果: 以上,没什么问题的话,可以看到  App.vue中对应的 router-

    2024年02月11日
    浏览(34)
  • 【无标题】 Vue 路由库Router 【重点】 - 安装 - 基本使用 - 路由配置 - 路由模式 - 路由传递参数 - 路由内置对象 - 路由守卫

    Vue 路由库Router 【重点】 安装 基本使用 路由配置 路由模式 路由传递参数 路由内置对象 路由守卫 Vue的内置API 【掌握】 ref Vue.set Vue.nextTick Vue.filter Vue.component Vue.use Vue.directive 进行页面的跳转(相当于a标签),Vue是SPA单页面应用,他的页面跳转必须使用Vue-Router路由进行实现

    2024年02月06日
    浏览(47)
  • 解决创建的vue项目没有router,view文件夹

    出现问题如图,没有router,view等文件夹 错误原因:创建的vue项目没有router,view文件夹是因为创建项目时的 Please pick a preset: 这个问题选错了,也就是第一个问题 如图所示,选择第三个 接下来的很多选择如图(不详写) 之后创建出来的就有了 ,如图

    2024年02月12日
    浏览(58)
  • Vue3 Vue-Router详解 Vue3配置hash 和 history路由、Vue3封装的路由hook函数(useRouter,useRoute)的使用 路由懒加载、路由分包处理、魔法注释的使用

     html部分 js部分  html页面使用路由传来的参数  获取router跳转id 获取 路由跳转错误地址

    2024年02月11日
    浏览(45)
  • Vue入门六(前端路由的概念与原理|Vue-router简单使用|登录跳转案例|scoped样式|混入(mixin)|插件)

    路由(英文:router)就是对应关系 SPA指的是一个web网站只有一个唯一的一个HTML页面, 所有组件的展示与切换 都在唯一的一个页面内完成。 此时, 不同组件之间的切换 需要通过 前端路由 来实现 总结:在SPA项目中, 不同功能之间的切换 ,要 依赖于前端路由 来完成 通俗移动

    2024年01月22日
    浏览(46)
  • vue Router路由

    是 Vue.js 的官方路由。它与 Vue.js 核心深度集成,让用 Vue.js 构建单页应用变得轻而易举。功能包括: 嵌套路由映射 动态路由选择 模块化、基于组件的路由配置 路由参数、查询、通配符 展示由 Vue.js 的过渡系统提供的过渡效果 细致的导航控制 自动激活 CSS 类的链接 HTML5 his

    2024年02月07日
    浏览(36)
  • 路由vue-router

    路由(英文:router)就是 对应关系 SPA 指的是一个 web 网站只有 唯一的一个 HTML 页面 ,所有组件的展示与切换都在这唯一的一个页面内完成。 此时,不同组件之间的切换需要通过前端路由来实现。 结论: 在 SPA 项目中,不同功能之间的切换 ,要依赖于 前端路由 来完成!

    2024年02月07日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包