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>