标签:vue component 生态系统 path 组件 router 路由
一、vue-router安装与使用
1、安装
进入项目目录中安装vue-router模块
E:\vueProject\webpackProject>cnpm install vue-router --save
2、在项目main.js文件中导入模块
import VueRouter from 'vue-router'
3、让Vue知道你使用路由
Vue.use(VueRouter);
此时即完成了vue-router的安装配置:
2、使用路由
vue-router方便做单页面的应用,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。
为方便起见,先建一个头部的导航,这里使用ElementUI的使用中的导航,进行点击切换路由:
(1)建立组件
导航条中有几个选项,建立几个组件,用于切换路由:
(2)定义路由组件
在main.js文件中引入创建的组件,这里它们就是路由组件了
//定义路由组件 import Vintroduce from 'Vhcomponents/Vintroduce' import Vproduct from 'Vhcomponents/Vproduct' import Vculture from 'Vhcomponents/Vculture'
(3)创建 router 实例
在main.js文件中创建router 实例,并且将路由配置注入(一个路由对应一个路由组件)
// 创建 router 实例,然后传 `routes` 配置,也就是一个路由对应一个组件 const router = new VueRouter({ routes:[ { path: '/', component: Vintroduce }, { path: '/product', component: Vproduct }, { path: '/culture', component: Vculture }, ] });
(4)挂载路由实例
在main.js文件中挂载router 实例
//将路由router挂载到Vue根实例上,一个项目只有一个根实例 new Vue({ el: '#app', router, //相当于router:router render: h => h(App) //加载组件 });
(5)在父组件中进行渲染也就是App.vue组件
<template> <!--页面结构--> <div id="app"> <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="1"> <router-link to="introduce">公司介绍</router-link></el-menu-item> <el-menu-item index="3" ><router-link to="product">产品管理</router-link></el-menu-item> <el-menu-item index="4"><router-link to="culture">公司文化</router-link></el-menu-item> </el-menu> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> </template>
上述渲染的过程中router-link相当于a标签,to相当于href属性,<router-view></router-view>为路由出口,这样就完成了路由的切换。
可以在main.js文件中: // 加入mode:history参数 const router = new VueRouter({ mode:'history', routes: [ {path: '/introduce', component: Vintroduce}, {path: '/product', component: Vproduct}, {path: '/culture', component: Vculture}, ] });去掉地址中的#
二、完整页面结构中使用
一般页面包含头部header、content、footer三部分,这三部分是三个组件,现在在主页面中App.vue中引入三个组件,而不是直接进行router-link
<template> <!--页面结构--> <div id="app"> <!--使用组件--> <Vheader></Vheader> <Vcontent v-bind:departArray="depart" v-on:onclick="addOneDate"></Vcontent> <!--绑定自定义属性--> <Vfooter></Vfooter> </div> </template>
然后再Vheader中进行router-link
而在Vcontent组件中渲染各个页面的内容
标签:vue,component,生态系统,path,组件,router,路由 来源: https://www.cnblogs.com/shenjianping/p/11236468.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。