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>