功能目标:点击导航栏中的菜单、主页、路由跳转到不同的组件,点击谁就在在导航栏下展示谁。

1、在router文件夹中(在用脚手架cli搭建项目时,有个couter的选yes)的index.js中,导入如需要配置的组件

import Home from '@/components/Home'
import Admin from '@/components/Admin'
import Login from '@/components/Login'
import Menu from '@/components/Menu'
import Register from '@/components/Register'
import About from '@/components/about/About'

2、在router中配置路由

routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/admin',
name: 'admin',
component: Admin
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/menu',
name: 'menu',
component: Menu
},
{
path: '/register',
name: 'register',
component: Register
},
{
path: '/about',
name: 'about',
component: About
}
],
mode:"history"//消除‘#/’

3、在主组件app.vue中展示跳转组件

<div class="container">
<!-- 跳转谁就展现谁 -->
<router-view></router-view>
</div>

4、在Header组件中添加跳转

<ul class="navbar-nav">
<!-- nav-link是取消前面的点 -->
<li><router-link to="/" class="nav-link">主页</router-link></li>
<li><router-link to="menu" class="nav-link">菜单</router-link></li>
<li><router-link to="admin" class="nav-link">管理</router-link></li>
<li><router-link to="about" class="nav-link">关于我们</router-link></li>
</ul>
<!-- ml-auto目的是使ul位置在右边 -->
<ul class="navbar-nav ml-auto">
<li><router-link to="login" class="nav-link">登陆</router-link></li>
<li><router-link to="register" class="nav-link">注册</router-link></li>
/ul>

  

vue项目1-pizza点餐系统2-配置路由跳转的更多相关文章

  1. Vue项目无法使用局域网IP直接访问的配置方法

    一般使用 vue-cli 下来的项目是可以直接访问局域网 IP 打开的,比如 192.168.1.11:8080 .但是最近公司的一个项目只可以通过 localhost 访问. 需要配置一下,才可直接 ...

  2. react项目中引入了redux后js控制路由跳转方案

    如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...

  3. vue + element-ui 制作下拉菜单(可配置路由、可根据路由高亮list、可刷新自动展开定位路由)

    本篇文章分享一篇关于 vue制作可路由切换组件.可刷新根据路由定位导航(自动展开).可根据路由高亮对应导航选项 一.实现的功能如下: 1.可折叠导航面板 2.点击导航路由不同组件           ...

  4. 一 创建一个springboot项目之(微信点餐系统的设计与开发)

    第一步:收到项目需求,进行数据库表的设计. 1.角色的划分: 卖家:  订单,类目 买家:  商品列表 2.功能模块的划分: 商品:商品列表 订单:  订单创建,订单查询,订单取消 类目:基于管理的功 ...

  5. 如何机智判断页面是刷新还是关闭,背景:vue项目,需求:关闭页面,下次直接跳到登陆页

    最近项目有这么个需求:要在关闭当前系统的窗口的时候,退出登录, 因为如果不退出登录可能存在安全风险,其实我想说,电脑没事别借给别人活着离开工位记得一定要锁屏,其实我们设置了cookie失效时间的,过了 ...

  6. vue项目如何通过前端实现自动识别并配置服务器环境地址

    前言: 一般来说,一个web项目的生产环境和测试环境的服务器地址一旦确定下来,很少会频繁变动的.那么就可以单独写一个脚本文件,通过当前访问的域名来判断当前的访问环境,然后再通过一定的规则获取对应的服务 ...

  7. Vue项目零碎知识(全局js,css配置,element-UI,bs使用, img动态配置,js数组)

    全局css样式,首先在静态assets中写好文件,然后要在main.js中配置 // 配置全局css样式 // import '@/assets/css/global.css' require('@/ ...

  8. vue项目中兼容ie8以上浏览器的配置

    1.首先需要在根目录的index.html文件加入如下代码 <meta http-equiv="X-UA-Compatible" content="IE=edge& ...

  9. webpack4.x 从零开始配置vue 项目(二)基础搭建loader 配置 css、scss

    序 上一篇已经把基本架子搭起来了,现在来增加css.scss.自动生成html.css 提取等方面的打包.webpack 默认只能处理js模块,所以其他文件类型需要做下转换,而loader 恰恰是做这 ...

随机推荐

  1. JavaScript疑难杂症系列-事件

    事件这块知识点虽然是老生长谈的,但对于我来说多多整理,多多感悟,温故知新,每次看看这块都有不同的收获.(在这里我不会长篇大论,只会挑重点;具体的小伙伴们自行查找) 什么是事件 在编程时系统内发生的动作 ...

  2. 20175212童皓桢 《Java程序设计》第十周学习总结

    学号 2016-2017-2 <Java程序设计>第X周学习总结 教材学习内容总结 一.Java中的线程的状态 建的线程在它的一个完整的生命周期中通常要经历如下的四种状态: 1.新建: 当 ...

  3. Kotlin 1 新运算符

    新运算符: “..” ,"in ","!in" ,"downto","step"注意: 1. 关系运算符的优先级低于算术 ...

  4. 正则表达式中常用的模式修正符有i、g、m、s、x、e详解

    正则表达式中常用的模式修正符有i.g.m.s.x.e等.它们之间可以组合搭配使用. 它们的作用如下: //修正符:i 不区分大小写的匹配; //如:"/abc/i"可以与abc或a ...

  5. tomcat 日志拆分

    一.用cronolog分割tomcat的catalina.out文件 1.编译安装cronologwget http://cronolog.org/download/cronolog-1.6.2.ta ...

  6. Searching for MobileNetV3

    1. 摘要 基于网络架构搜索和 NetAdapt 算法,作者提出了新一代的 MobileNets,并通过一些先进的结构对其进行了改进. 作者发布了两个模型 MobileNetV3-Large 和 Mo ...

  7. 远程连接mysql要点 虚拟主机定义与分类

    远程连接mysql:通过主机地址与端口号连接 1. 主机地址:找到主机电脑 2. 端口号:找到对应mysql软件 mysql客户端访问服务端需要进行寻找匹配:连接认证-h 主机地址 例如 -hloca ...

  8. OpenStack 虚拟机冷/热迁移功能实践与流程分析

    目录 文章目录 目录 前文列表 虚拟机迁移的应用场景 需要迁移的虚拟机数据类型 虚拟机迁移的存储场景 文件存储 块存储 非共享存储 迁移的类型 迁移的方式 执行虚拟机冷迁移 冷迁移日志分析 执行虚拟机 ...

  9. Selenium 2自动化测试实战11(键盘事件)

    一.键盘事件 1.Keys()类提供了键盘上几乎所有按键的方法,如下实例: #coding:utf-8 from selenium.webdriver.common.keys import Keys ...

  10. Group By查询

    1.概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.原始表 3.简 ...