vue-router使用

一.首先利用vue-cli生成好vue项目模板参考（ vue-cli使用 ）

二.在App.vue添加router-link和router-view。（这里添加了两个路由）

<div id="app">
    <router-link to='/You'>You</router-link>
    <router-link to='/Me'>Me</router-link>
    <router-view></router-view>
</div>
           

三.在App.vue所在的文件夹下创建Me.vue和You.vue两个文件并添加如下代码

Me.vue

<template>
    <h1>Me</h1>
</template>
           

You.vue

<template>
    <h1>You</h1>
</template>
           

四.main.js代码展示

import Vue from 'vue'
import App from './App.vue'
// 导入You和Me
import You from './You.vue'
import Me from './Me.vue'
// 导入vue-router
import VueRouter from 'vue-router'
Vue.use(VueRouter);
const router=new VueRouter({
  routes:[//一定注意不能写成routers
    {path:"/You",component:You},//path对应的一定要和router-link对应的路径一样不能多一个点
    {path:"/Me",component:Me}
  ]
});
new Vue({
  router,//添加路由
  el: '#app',
  render: h => h(App)
})