页面结构分析
node_modules表示 所有通过npm安装的东西 都在该文件夹中
public 公共的文件目录 所有src写的代码 都会发布到public下面的index.html中
src 就是开发所有的文件目录 里面的文件名称可以随便建立
一般情况下 页面(大组件)也在views中 views中页面使用的组件 写在components中
router放的路由的配置 路由就是导航 访问什么样的地址 就加载什么样的组件 原理就是动态组件 component is
App.vue是主页面 main.js是主入口 一般放全局引用的 组件 比如VantUI库 axios flexible等等
:自己使用页面配置路由 先在views中 新建 四个页面 Home.vue About.vue表示影院 List.vue表示咨询 Mine.vue表示个人代码
router页面 写入:
const routes = [
{
path: '/',
component: Home,
},
{
path: '/list',
name: 'list',
component: () => import("@/views/List.vue"),
},
{
path: '/about',
name: 'about',
component: () => import("@/views/About.vue"),
},
{
path: '/mine',
name: 'mine',
component: () => import("@/views/Mine.vue"),
},
]
3:页面需要显示 需要进行路由的配置 router文件夹的index.js中 先引入之前写好的四个页面
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
如果需要导航(a标签 router-;link) 可以去App.vue中设置一下
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/cinema">影院</router-link>|
<router-link to="/info">资讯</router-link> |
<router-link to="/mine">个人</router-link>
</div>
<router-view/>
</div>
</template>
可以把整个nav定位到最下面 只需要修改nav的样式即可
#nav {
width:100%;
height: 40px;
position:fixed;
left:0;
bottom:0;
display: flex;
}
#nav a {
font-weight: bold;
color: #2c3e50;
flex:1;
text-align: center;
height: 40px;
}
效果如下