vue-router超详细教程(1)

vue-router教程

vue-router使用教程
vue2.x版本

先看一目录

下载 npm i vue-router -S

在main.js中引入 import VueRouter from 'vue-router'

安装插件Vue.use(VueRouter) router文件夹下index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

配置路由规则router文件夹下index.js文件

在app.vue中留坑 <router-view></router-view>

//app.vue中
<template>
    <div>
        <!-- 留坑，非常重要 -->
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data(){
            return {}
        }
    }
</script>