创建带路由的Element项目

前置实验

实训步骤

编写网页

按照模块化开发：创建Element控制面板中所述方法编写网页并运行

安装模块

在项目本身目录执行

npm install vue-router@3

这时会看到node_modules目录下多了一个vue-router目录。

注：vue2 对应的是vue-router 3版本。

设置导航

在Aside.vue中设置导航链接：

<template>
	<el-aside width="200px" style="background-color:#182730;color:#FFF">
		<h3>丝路通<br>供应商数据中台</h3>
		<el-menu :default-openeds="['1', '3']" default-active="2" class="el-menu-vertical-demo"
			background-color="#182730" text-color="#FFF" active-text-color="#ffd04b">
			<el-submenu index="1">
				<template slot="title"><i class="el-icon-message"></i><router-link to="/intro" class="link">整体行情</router-link></template>
	
			</el-submenu>
			<el-submenu index="2">
				<template slot="title"><i class="el-icon-menu"></i><router-link to="/search" class="link">产品搜索</router-link></template>
				
			</el-submenu>
			<el-submenu index="3">
				<template slot="title"><i class="el-icon-setting"></i>><router-link to="/advanced_search" class="link">高级搜索</router-link></template>
				
			</el-submenu>
			<el-submenu index="4">
				<template slot="title"><i class="el-icon-setting"></i>><router-link to="/survey" class="link">选品调研</router-link></template>
				
			</el-submenu>
			<el-submenu index="5">
				<template slot="title"><i class="el-icon-setting"></i>><router-link to="/compare" class="link">利润对比</router-link></template>
				
			</el-submenu>
		</el-menu>
	</el-aside>
</template>

新增链接样式link ;

<style>
                        。。。

			.link{
				text-decoration: none;color:white;
			}
</style>

在App.vue中设置组件渲染位置

<template>
  <div id="app">
			<el-container style="height: 700px; border: 1px solid #eee">

				<Aside></Aside>

				<el-container>
					<Header></Header>
					<!-- <Main></Main>	 -->
					<router-view></router-view>
					<el-footer></el-footer>
				</el-container>
			</el-container>
  </div>
</template>

定义路由组件

在components目录下新建Intro.vue ,Search.vue , Advanced_search.vue,Survey.vue,Compare.vue 等5个文件

每个文件都类似下面这种：

Intro.vue:

<template>
    <div>整体行情</div>
</template>

<script>
export default {
    data(){
        return {}
    }
}
</script>

配置路由信息

单独定义一个模块文件，配置路由信息。

在src目录下新建一个router文件夹，在该文件夹下新建一个index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'  // 导入vue-router
import Main from '@/components/Main'
import Intro from '@/components/Intro'
import Search from '@/components/Search'
import Advanced_search from '@/components/Advanced_search'
import Survey from '@/components/Survey'
import Compare from '@/components/Compare'



Vue.use(VueRouter)  //安装vue-router插件

// 将VueRouter实例作为模块的默认导出
const router = new VueRouter({

  routes: [
	{
	  path: '/',
	  component:Main
	},
    {
      path: '/intro',
      component:Intro
    },
	{
	  path: '/search',
	  component:Search
	},
	{
	  path: '/advanced_search',
	  component:Advanced_search
	},
	{
	  path: '/survey',
	  component:Survey
	},
	{
	  path: '/compare',
	  component:Compare
	},
	
  ]
})

export default router;

注入VueRouter实例

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

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

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

实训结果

运行项目，

在浏览器输入http://localhost:8080/

能够看到右侧页面主体部分已经能根据不同链接进行切换、显示不同内容。