vue使用路由router-view的详细代码
作者：知之、行之、思之
这篇文章主要介绍了vue使用路由router-view的相关知识,其原理就是采用 SPA(single-page-application) 模式,就是只有一个 Web 页面的应用,通过 router 来控制页面的刷新和迭代,感兴趣的朋友一起看看吧
前言： router-view 与 NavMenu 导航栏的配合，在 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 页面全部放在这里。
2、 其中每个 index.vue 的内容都很简单，只有一行文字
<template>
<div>view-1</div>
</template>
<script>
/* eslint-disable */
export default {
name: 'view-1',
mounted() {
},
}
</script>3、 另外 package.json 的依赖关系也一并贴上， 至此可以执行 npm install 来安装依赖库
二、编写脚本
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')3、编辑项目的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 的内容。
点击 view-3，下方白色区域的内容变成了 view-3/index.vue 的内容。
结语
以上内容就可以实现如题所示的问题，希望对你有所帮助
到此这篇关于vue使用路由router-view的文章就介绍到这了,更多相关vue 路由router-view内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！