页面结构分析

node_modules表示 所有通过npm安装的东西 都在该文件夹中

public 公共的文件目录  所有src写的代码 都会发布到public下面的index.html中

src 就是开发所有的文件目录  里面的文件名称可以随便建立

一般情况下 页面(大组件)也在views中   views中页面使用的组件 写在components中

router放的路由的配置  路由就是导航  访问什么样的地址 就加载什么样的组件  原理就是动态组件 component is

App.vue是主页面  main.js是主入口 一般放全局引用的 组件 比如VantUI库  axios flexible等等

2:自己使用页面配置路由  先在views中 新建 四个页面 Home.vue  Cinema.vue表示影院  Info.vue表示咨询   Mine.vue表示个人

代码分别如下

Home.vue中
<template>
  <div class="home">
    首页
  </div>
</template>

 

Cinema.vue中
<template>
  <div class="cinema">
    影院
  </div>
</template>

Info.vue中
<template>
    <div class="info">
        资讯
    </div>
</template>

Info.vue中
<template>
    <div class="mine">
        个人
    </div>
</template>

3:页面需要显示  需要进行路由的配置  router文件夹的index.js中 先引入之前写好的四个页面

import Home from '../views/Home.vue'
import Cinema  from  "../views/Cinema.vue";
import Info  from  "../views/Info.vue"
import Mine  from  "../views/Mine.vue" 

 

4:配置

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/cinema',
    name: 'cinema',
    component: Cinema
  },
  {
    path: '/info',
    name: 'info',
    component:Info
  },
  {
    path: '/mine',
    name: 'mine',
    component: Mine
  },
 
]

全部代码如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Cinema  from  "../views/Cinema.vue";
import Info  from  "../views/Info.vue"
import Mine  from  "../views/Mine.vue" 

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/cinema',
    name: 'cinema',
    component: Cinema
  },
  {
    path: '/info',
    name: 'info',
    component:Info
  },
  {
    path: '/mine',
    name: 'mine',
    component: Mine
  },
 
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

在重新运行  npm run serve 查看效果 在浏览器输入不同的地址 就显示对应的页面

如果要改成hash模拟   修改  mode :hash

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

export default router

再次浏览

如果需要导航(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;
  line-height: 40px;
}

 

效果如下