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>