zoukankan      html  css  js  c++  java
  • vue项目1-pizza点餐系统2-配置路由跳转

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

    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>
    

      

  • 相关阅读:
    NUnit
    Fxcop
    msdeploy命令实现远程部署时保留指定文件
    virtualBox 创建新虚拟机
    sharepoint项目部署
    执行批处理文件
    NCover
    配置Web DashBoard
    ccnet+ncover+fxcop+web deploy+mstest
    命令行部署Reporting Services项目
  • 原文地址:https://www.cnblogs.com/JimShi/p/11169642.html
Copyright © 2011-2022 走看看