Vue学习第一节：component和router的使用

以下均是学习过程时当下的理解，仅是记录，对错自辨。

• component

component文件夹需要自己创建，与assets同级。
component不过就是一个小的界面，包含 html、css、js的代码，可以像div一样引用。
创建一个

<template>
  <div>
    <li>
      <router-link to="/second">点我去第二个页面</router-link>
    </li>
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        author: "微信公众号 jinkey-love"
      }
    }
  }
</script>

<style>
</style>

使用时，在App.vue文件里的<script></script>中的第一行写上:(第二种方法在router里会说)

 import firstcomponent from './component/firstcomponent.vue';

在template

<template>
  <div id="app">
     <firstcomponent></firstcomponent>
  </div>
</template>

• router

main.js文件的配置

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router";
import VueResource from 'vue-resource'

//开启debug模式
Vue.config.debug = true;

Vue.use(VueRouter);
Vue.use(VueResource);

// 定义组件, 也可以像上面的方法从别的文件引入
import firstcomponent from './component/firstcomponent.vue'
import secondcomponent from './component/secondcomponent.vue'

// 创建一个路由器实例
// 并且配置路由规则
const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    // 重定向    这是默认的第一个页面
    {
      path: '/',
      redirect: '/first'
    },
    {
      path: '/first',
      component: firstcomponent
    },
    {
      path: '/second',
      component: secondcomponent
    }
  ]
})

// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
const app = new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app')

App.vue的代码如下：

<template>
  <div id="app">
    <firstcomponent></firstcomponent>
    <router-view class="view">
    </router-view>
  </div>
</template>

<script>
  import firstcomponent from './component/firstcomponent.vue';
  export default {
    name: 'app',
    data() {
      return {
        msg: 'Hello Vue!'
      }
    },
    components: {
      firstcomponent
    }
  }
</script>

<style lang="scss">
</style>

firstcomponentfirstcomponent.vue的代码在最上面。

router-link就像是a标签

      <router-link to="/first">点我去第一个页面</router-link>

router-view就像是html

• 动态router

定义方式：在main.js里面，使用 ????* 作为动态的部分

routes: [
    {
      path: '/first/:id',
      component: firstcomponent
    }
   ]

在页面中，比如compotent的代码中，则：

<template>
...略
<div>我是user组件, 动态部分是{{id}}</div>
...略
</template>
<script type="text/javascript">
  export default {
    data() {
      return {
        id: this.$route.params.id
      }
    }
  }
</script>

在按钮中的路由跳转则：

methods:{
  clickFn:function(){
    this.$router.push({path:'/index'});
}

参考：vue-router 基本使用