基于vue-cli构建vue-router的入门级demo

框架

浏览数:613

2019-6-13

前言

本案列仅针对刚刚入门vue学习的伙伴,博主也是刚刚在学基于vue-cli搭建脚手架项目,对于前端大牛,可以移步。

快速搭建vue-cli环境

如何搭建基于vue-cli项目,这里不再叙述,如果不会的伙伴可以自己百度。
项目搭建完成后,基本文件目录如下:

打开我们刚刚创建的my-project文件夹,这里对文件夹下的一些文件做简要说明:

实现具体流程

  1. 新建三个单组件文件,main.vue,person.vue,user.vue ,效果图如下:

  2. main.vue文件中代码如下:
<template>
  <div id="main">
    <h1>首页</h1>
    <p>这里是首页,可以放置一些公司的相关信息,简介等资料</p>
  </div>
</template>
<script>
export default {
  name: 'Main',
  data () {
    return {}
  }
}
</script>
<style>
  #main {
    color: red;
  }
  #main p {
    background: #bbffaa;
  }
</style>

这里是首页组件的相关内容,一个组件文件有三部分组成(template+script+css),可以简单理解成一个网页的三要素:html+css+javascript

  1. user.vue 文件中相关代码:
<template>
  <div id="user">
    <h1>个人信息</h1>
    <p>姓名:{{userName}}</p>
    <p>年龄:{{age}}</p>
  </div>
</template>
<script>
export default {
  name: 'User',
  data () {
    return {
      userName: 'dream.cc',
      age: 24
    }
  }
}
</script>
<style>
#user {
  color: blue
}
#user p{
  background: deeppink;
}
</style>
  1. person.vue 文件中相关代码如下:
<template>
  <div id="person">
    <h1>个人中心</h1>
    <p>这里是个人中心,欢迎访问个人相关信息</p>
    <router-link to="/person/user">用户信息</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'Person',
  data () {
    return { }
  }
}
</script>
<style>
  #person {
    color: greenyellow;
  }
  #person p {
    background: pink;
  }
</style>

这里利用了嵌套路由,user组件在person组件的内部渲染,user是person的子路由。一个基本路由实现需要两个标签,router-link(默认渲染成a标签)和router-view(路由渲染的容器,指定将来路由组件渲染的位置)

  1. 配置router文件下的index.js,路由的匹配规则
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../components/Main.vue'
import Person from '../components/Person.vue'
import User from '../components/User.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/main',
      name: 'Main',
      component: Main
    },
    {
      path: '/person',
      name: 'Person',
      component: Person,
      children: [
        {
          path: 'user',
          name: 'User',
          component: User
        }
      ]
    }
  ]
})

每一个路由对应一个组件,path属性提供路由地址,component属性提供匹配地址所对应的组件,这里需要注意component属性后面是一个我们事先定义的三个组件模板对象,所以这里先必须导入三个组件文件

  1. App主组件挂载router-link和router-view标签,具体代码如下:

  2. 设置main.js 文件。 导入router下的index.js ,在vue实例下挂载router属性。
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

以上代码保存后,终端可运行npm run dev开启本地服务器查看我们代码 。如需打包可运行npm run build ,项目发布时只需把dist文件丢到服务器即可。

后缀

如果你觉得上面的案列对你有作用,欢迎转载,希望能注明出处。同时你也可以在GitHub或知乎上与我一起进阶前端学习。

找到我: GitHub
找到我:知乎

作者:pubdreamcc