main.js

// main.js
// 1.1  导入路由的包
import VueRouter from 'vue-router'// 1.2 安装路由
Vue.use(VuerRouter)// 1.3 导入自己的router.js模块
import router from './router.js'// 1.4 挂载router对象在vm实例上
const vm = new Vue({el: '#app',router
})

app.vue

原本的 a 标签需改为 router-link.
href属性需改为to

// (原生)栗子
< a class="mui-tab-item mui-active" href="#tabbar"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首页</span>
</a>// (使用vue-router之后的熟)栗子
<router-link class="mui-tab-item mui-active" to="/home"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首页</span>
</router-link>

配置路由激活样式(高亮类).

// router.js
// 1.1 导入 vue-router
import VurRouter from 'vue-router'// 1.2 创建路由对象
var router =  new VueRouter({routes:[],    // 这一行创建自己的路由规则linkActiveClass: 'mui-active'     // 这里假设了高亮类为 mui-active
})// 1.3 导出自己的路由
export default router

配置路由规则

// router.js
// 1.从其他页面导入,做好的路由组件
import HomeContainer from './lib/components/tabbar/HomeContainer.vue'
import MemberContainer from './lib/components/tabbar/MemberContainer.vue'
import ShopcarContainer from './lib/components/tabbar/ShopcarContainer.vue'
import SearchContainer from './lib/components/tabbar/SearchContainer.vue'// 2.在路由对象上设置路径和路由组件的对应规则
var router = new VueRouter({routes: [{ path: '/home', component: HomeContainer },{ path: '/member', component: MemberContainer },{ path: '/search', component: SearchContainer },{ path: '/shopcar', component: ShopcarContainer },// 配置路由规则]
})// app.vue
// 在主区域中显示路由组件
<template>
<div>
<!-- 顶部区域 -->...<!-- 中间路由 router-view -->
<router-view></router-view><!-- 底部 tabbar 区域 -->
....

vue --- vue-router(项目模式的导入)相关推荐

【Vue】实战项目：电商后台管理系统（Element-UI）（一）前后端搭建 - 登录界面 - 主页界面
文章目录 0. 项目介绍电商管理系统(Element-UI) 开发模式前端技术栈后端技术栈 1. 配置--初始化前端项目 ① 安装 Vue 脚手架 ② 通过 Vue 脚手架创建项目 ③ 配置 ...
vue vite创建项目的使用（使用技术栈vue3+vuex+router+ts+element plus）
文章目录前言创建vite项目 vite.config.ts配置自动化引入组件配置以及.env配置的引用创建src/vite-env.d.ts main.ts配置 api/request.ts ...
Vue 路由router的两种模式
两种模式 vue中router可以设两种模式:hash和history.设置方式就是代码中注释的部分. import Vue from 'vue' import Router from 'vue-ro ...
Vue Router路由模式的区别进程线程的区别
Vue Router hash模式和history模式的区别 hash模式url里面永远带着#号,我们在开发当中默认就是hash模式. 那么什么时候需要用到history模式呢? 肯定是用户觉得#号太 ...
Vue + Spring Boot 项目实战（八）：导航栏与图书页面设计
文章目录前言一.导航栏的实现 1.路由配置 2.使用 NavMenu 组件二.图书管理页面 2.1. LibraryIndex.vue 2.SideMenu.vue 3.Books.vue 前言 ...
Vue + Spring Boot 项目实战（七）：前端路由与登录拦截器
文章目录前言一.前端路由二.使用 History 模式三.后端登录拦截器 3.1. LoginController 3.2. LoginInterceptor 3.3. WebConfigur ...
Vue + Spring Boot 项目实战（四）：前后端结合测试（登录页面开发）
前面我们已经完成了前端项目 DEMO 的构建,这一篇文章主要目的如下: ①打通前后端之间的联系,为接下来的开发打下基础 ②登录页面的开发(无数据库情况下) 文章目录一.后端项目创建 1.1. 项目/ ...
在VS2010下利用vue开发团队项目
开发一个项目,采用什么语言都可以,主要能熟练高效的开发都是合理的,这次我们采用vue来开发一个团队项目.在开始之前掌握vue的基本用法,如双向数据绑定.组件和路由等,建议先去看之前的文档(webpac ...
vue 总结一项目建立及文件夹结构配置
项目配置首先,按官方指引,使用 vue-cli 搭建 vue 的项目,在项目里按照上面的文档尝试修改,加深理解: # 安装依赖库,建议指定 vue 和 element 版本,避免版本升级带来意料之外 ...

vue --- vue-router(项目模式的导入)

main.js

app.vue

配置路由激活样式(高亮类).

配置路由规则

vue --- vue-router(项目模式的导入)相关推荐

最新文章

热门文章