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>