Vue.js 路由入门

先上一张项目结构图，建议有一点vue基础的人和npm基础的人观看本文章

先建个工程，可以使用npm的命令建

vue init webpack （这里写的是你的项目名，我写的是myvue）

之后全都Y就可以了然后用idea打开这个项目，也可以直接在idea中建一个Vue项目

看这个项目结构，有三个组件，还有一个主入口，以及一个配置路由的js文件

下面直接上代码

main.js

//main.js
import Vue from 'vue';//导入Vue组件

import App from "./App";//导入自己写的App.vue组件
import Router from "./router";//导入自己配置路由的组件，
//如果这个文件夹下的文件名为index.js后面就可以省略index.js不写。

//建一个Vue对象
new Vue({
   
  el: '#app',//绑定元素
  components: {
   App},//添加组件
  router: Router,//添加router路由对象
  template: '<App></App>'//主页使用那个模板，因为components中只有一个App，所以这里就使用App了，
  //模板只能使用一个如果想使用多个就要使用v-if v-else 这种判断来显示一个。 
})

从上面的代码可以看到 main.js绑定了路由，还有主页。
下面看看自己写的组件干了什么事情吧。

App.vue

<!--App.vue-->
<template>
  <div