vue/02的学习二 页面和路由

页面结构分析

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;
}
效果如下