vue[elementUI导航切换以及路由router |
您所在的位置：网站首页 › router-link跳转没有反应 › vue[elementUI导航切换以及路由router |
vue[elementUI导航切换以及路由router
|
导航是一个项目必然会存在的一种页面内容,因此就需要了解vue以及vue-router对导航的一些操作以及elementui导航组件的常规使用 前提准备 引入elementui和vue-router npm install elementui --save npm install vue-router --save创建router.js文件导出vue-router实例 router.js代码 import Vue from "vue"; import Router from "vue-router"; Vue.use(Router); const routerConfig = { routes: [ // 路由配置 ] } export default new Router(routerConfig);在main.js中引入router.js以及elementui import Vue from "vue"; // import element-ui并且注册 import ElementUI from "element-ui"; import "element-ui/lib/theme-chalk/index.css"; Vue.use(ElementUI); // 引入路由 import router from "src/router/router.js"; router-view和router.js中的层级关系但凡有一个router-view，router.js中就会有一层路由 在router.js中定义了一个home路由，然后配置好对应的组件，即可通过http://localhost:端口/home访问，因为App.vue中已经存在了一层router-view router-link 和 $ router是用于导航的，只是router-link为声明式(写在中)，一种为编程式(写在 watch: { $route(to，from) { console.log(to); console.log(from); } } elementUI导航组件的使用通常导航内容会以v-for循环的形式进行动态渲染内容。 elementUI导航组件的使用可以分为路由式跳转和编程式跳转区别在于是否使用router属性 vue-router[一文整理vue-router的常规使用] |
而有两层关系的路由，则需要在对应的父组件里面布置router-view，即有两层router-view关系。三层依次类推 
加上这个属性，后续的所有跳转都会以index为路由跳转 
另一种方式可以使用@select的方法监听导航栏的选择事件，然后获取到对应的信息，进行手动操作 
【本文地址】
今日新闻 |
推荐新闻 |