vue(31) : vue2使用element-ui菜单

原创已于 2023-06-28 11:31:52 修改 · 595 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ui #前端 #vue2路由

于 2023-06-28 11:29:01 首次发布

本文介绍了如何在Vue2项目中安装和配置VueRouter，包括在main.js中引入路由，创建router目录和index.js文件来设定路由规则，创建views文件夹和t1、t2组件，以及在App.vue中设置菜单触发路由跳转。

参考 :

Vue2路由的详细讲解_巧克力小猫猿的博客-优快云博客

vue路由配置_努力学前端Hang的博客-优快云博客

1.安装路由

npm i vue-router@3.6.0 -S

2.main.js引入路由

// 路由
import router from './router'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
 

// new
new Vue({
  render: h => h(App),
  router:router // 这里加这一行
}).$mount('#app')

3.src下面创建router目录

再创建index.js文件,内容如下

import VueRouter from "vue-router"
const router = new VueRouter({
	routes: [
		//配置路由的路径
		{
			path: '/t1',
			component: () => import('@/views/t1'),
			hidden: true
		},
		{
			path: '/t2',
			component: () => import('@/views/t2'),
			hidden: true
		}
	]
})

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

export default router;

4.src创建views文件夹

创建t1.vue文件,内容如下


<template>
	
<div><h1>t1</h1></div>
</template>

<script>
	console.log("这是t1")
</script>

<style>
</style>

创建t2.vue文件,内容如下


<template>
	
<div><h1>t2</h1></div>
</template>

<script>
	console.log("这是t2")
</script>

<style>
</style>

5.src下App.vue文件内容如下

<template>
	<div id="app">
		<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
			<el-menu-item index="1" @click="toT1()">处理中心</el-menu-item>
			<el-menu-item index="2" @click="toT2()">处理中心2</el-menu-item>
		</el-menu>
		<router-view />
	</div>
</template>

<script>
	import HelloWorld from './components/HelloWorld.vue'

	export default {
		name: 'app',
		components: {
			HelloWorld
		},
		data() {
			return {
				activeIndex: '1'
			};
		},
		created() {
			this.$router.push({
				path: '/t1'
			})
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},
			toT1() {
				this.$router.push({
					path: '/t1'
				})
			},
			toT2() {
				this.$router.push({
					path: '/t2'
				})
			}
		}
	}
</script>

<style>
</style>

然后就能跳转了