vue-router 路由和组件
2018-07-26 08:50
531 查看
版权声明:转载请注明出处, 谢谢! https://blog.csdn.net/shenxianhui1995/article/details/81213533
然后将底部的公共组件引用到这个文件夹内, 组件首字母建议大写, 代码如下
进入前面创建好的文件
vue-router 是 vue 中需要学习的一个重要部分, 下面我来与大家分享下自己的经验
想了解更多组件的知识请看Vue 自定义组件
以 饿了么APP 为例
底部是我用 mint-ui 做成的公共组件, 取名为 “BottomTab”
首先我们来配置下公共组件
BottomTab, 代码如下 (mint-ui 引入需要单独配置, 这里不做详述)
<template> <mt-tabbar v-model="currentId" fixed> <mt-tab-item id="home"> <!-- <img slot="icon" :src="[currentId == 'home' ? require('') : require('')]"> --> <img slot="icon" :src="currentId == 'home'"> 首页 </mt-tab-item> <mt-tab-item id="discover"> <!-- <img slot="icon" :src="[currentId == 'discover' ? require('') : require('')]"> --> <img slot="icon" :src="currentId == 'discover'"> 发现 </mt-tab-item> <mt-tab-item id="order"> <!-- <img slot="icon" :src="[currentId == 'order' ? require('') : require('')]"> --> <img slot="icon" :src="currentId == 'order'"> 订单 </mt-tab-item> <mt-tab-item id="profile"> <!-- <img slot="icon" :src="[currentId == 'profile' ? require('') : require('')]"> --> <img slot="icon" :src="currentId == 'profile'"> 我的 </mt-tab-item> </mt-tabbar> </template> <script> export default { name: "BottomTab", data() { return { currentId: "home" } }, watch: { // 实现路由跳转 currentId: function(val, oldVal) { this.$router.push("/" + val); } } }; </script>
创建完组件之后, 接下来就是要将它引入到相应的页面中了
首先创建一个文件
main.vue做为所有页面的主路由, 各个页面的公共模块都放在这个文件里面
然后将底部的公共组件引用到这个文件夹内, 组件首字母建议大写, 代码如下
<template> <div> <!-- 3. 在 template 中就可以直接使用了 --> <BottomTab></BottomTab> </div> </template> <script> // 1. 使用 import 导入想要引用的的子组件, 这里采用的是绝对路径 import BottomTab from '@/components/common/BottomTab' export default { name: 'mainContent', components: { // 2. 在 components 中写入子组件 BottomTab }, </script>
想实现路由之间相互跳转的话, 必须得先配置 router/index.js 文件
mainContent为主路由;
home
discover
order
profile为子路由, 对应跳转的四个页面, 代码如下
import Vue from 'vue' import Router from 'vue-router' // 主路由 const MainContent = resolve => require.ensure([], () => resolve(require('@/views/main.vue')), 'MainContent'); // 首页 const Home = resolve => require.ensure([], () => resolve(require('@/views/home/Home.vue')), 'Home'); // 首页 // 发现 const Discover = resolve => require.ensure([], () => resolve(require('@/views/discover/Discover.vue')), 'Discover'); // 发现 // 订单 const Order = resolve => require.ensure([], () => resolve(require('@/views/order/Order.vue')), 'Order'); // 订单 // 我的 const Profile = resolve => require.ensure([], () => resolve(require('@/views/profile/Profile.vue')), 'Profile'); // 我的 Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: '/home' // 默认路径 }, { //主路由 path: '/main', name: 'mainContent', component: MainContent, children: [ { // 首页 path: '/home', name: 'home', component: Home }, { // 发现 path: '/discover', name: 'discover', component: Discover }, { // 订单 path: '/order', name: 'order', component: Order }, { // 我的 path: '/profile', name: 'profile', component: Profile }, ] }, ] })
router-view
主要是构建 SPA (单页应用) 时,方便渲染你指定路由对应的组件。你可以router-view
当做是一个容器,它渲染的组件是你使用vue-router
指定的
路由配置完成后, 就要使用
router-view进行渲染了 (只要有子路由, 就要用它来渲染)
进入前面创建好的文件
main.vue内, 代码如下
<template> <div> <BottomTab></BottomTab> <div class="main-content"> <router-view></router-view> </div> </div> </template>
然后进入页面看一下效果, 是否配置成功
相关文章推荐
- vue-router 多个路由地址绑定一个组件造成 created 不执行的解决方法
- Vue.js路由组件vue-router使用方法详解
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- Vue.js路由组件vue-router的使用方法
- Vue的路由功能(1)简单路由与vue-router的基础使用(同步/异步组件)
- 三、Vue(组件、组件间数据传递、slot内容分发、vue-router路由、单文件组件、vue-cli脚手架 )
- vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
- VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)
- vue-router 多个路由地址绑定一个组件造成 created 不执行的解决方法
- vue-router菜鸟进阶!(路由组件传参 vs H5 History模式)
- Vue 之 vue-router 路由嵌套不显示问题
- vue-router 与 elementUI导航栏 配合实现路由设置小技巧
- vue-router(2.0)之什么是路由以及使用步骤(笔记)
- vue-router学习二(动态路由)
- React第三方组件1(路由管理之Router的使用①简单使用)
- Swift Router 页面跳转路由,组件解耦