01.vue-router的基本使用

Vue前端路由

1. npm install vue-router --save

2.脚手架安装

---

 

一、目录结构

二、index.js

// 0.导入vue和路由插件
import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from "../components/Home"
import About from  "../components/About"

// 1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter);

// 2. 创建VueRouter对象
const routers = [
  {
    // 6.0 配置路由和组件之间的映射关系
    path: '/home',
    component: Home
  },
  {
    path: "/about",
    component: About
  },

];

const router = new VueRouter({
  // 6.1 配置路由和组件之间的映射关系
  // router:router,     下面是es6字面量的增强写法
  routers

});

// 3. 先导出，将router对象传入到Vue实例
export default router

三、main.js

import Vue from 'vue'
import App from './App'
// 4.在main.js里面导入router
import router from './router'
// 如果导入一个文件夹，它会自动找到该文件夹下的index文件

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //  5.Vue里面挂载router
  router,
  render: h => h(App)
})

四、App.vue 

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <!--  router-view相当于占位-->
    <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>