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

前言

本案列仅针对刚刚入门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
找到我：