Vue路由入门

关于那些配置我就不在这里弄了，个人笔记，不懂得百度去下载路由啥的！

因为我们学习了vue后，我们就是用组件代替了以前的html代码实现页面，一个组件就是一个页面或者一块东西，话不多说，下面就是详细的步骤：
 

1.项目结构：

 我们都是在src下开发的，那么我们就需要手动创建一个组件（componens）的文件夹，和一个router的文件夹，为了加载组件的   

首先我们第一件事很简单就是先创建一个vue组件Kuang.Vue  其他两个是一样的，只为了演示一个

<template>
<h1>狂</h1>    //点击链接后的文本都在这个地方配置
</template>

<script>
export default {       //这里是导出，这里导出了，另外一边就要导入，那就是配置路由的地方
  name: "Kuang"  
}
</script>

<style scoped>

</style>

上面我们定义了一个自定义组件，然后导出了，现在我门就要去导入，然后配置那些啥的

import Vue from "vue"; 
import VueRouter from "vue-router";   //上面这两两个导入是必须要的，因为这就是路由器的配置
import Kuang from "../components/Kuang"; //这个是我们导入，因为刚刚导出了嘛，之类就导入，然后配置
//安装路由
Vue.use(VueRouter)

//配置导出路由
export default new VueRouter({
  routes:[
    {
      //理由路径
      path: '/kuang',
      //跳转的路径
      component:Kuang
    }
  ]
});

然后我们就随便看看自带的第一个文件，基本上固定不变的：

import Vue from 'vue'
import App from './App'
import router from './router/index'  //自动扫描里面路由配置
Vue.config.productionTip = false


new Vue({
  el: '#app',
  //配置路由
  router,
  components: { App },
  template: '<App/>'
})

最后一步就是我们最终的视图位置，App.Vue

<template>
  <div id="app">
    <h1>aaa</h1>
    <router-link to="/kuang">kuang</router-link>
    <router-view></router-view>    //这整个文件需要做的就是<template>中，
                            //注意：<router-link to="/Kuang"> kuang</router-link>类似于超链接   然后最后那个<router-view></router-view>是必要的，因为才能显示出来

  </div>
</template>

<script>
import Content from "./components/Content"
export default {
  name: 'App',

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果：