vue-router详解及实现步骤

代码中有详细的解释，包含对单行代码的功能解释，欢迎阅读讨论

app.vue

<template>
<div>
  <div>
    <!-- 1、跳转到的路径， -->
    <router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>
  </div>
  <div>
    <!--/2、组件显示的位置 -->
    <router-view></router-view>
  </div>
</div>
</template>
<script>
//3、不需要导入组件
  export default {
    name:'App',
  }
</script>

main.js文件

//1.导入四个(vue组件或模块)
import Vue from 'vue'
import VueRouter from 'vue-router'
import router from './router'
import App from './App.vue'
// 2.插件vue要使用
Vue.use(VueRouter)
//创建vue对象，配置对象属性参数
export default new Vue({
  //3.挂载到index.html的类名为“#app”div标签上
  el: '#app',
  //4.对App组件进行渲染
  render: h => h(App),
  //5.导入路由信息
  router
})

index.js

// 建立组件和请求路径间的关系
// 1.导入vue-router模块
import vueRouter from 'vue-router'
// 2.导入组件模块
import Home from '../components/Home'
import About from '../components/About'
//3.配置vueRouter对象
export default new vueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component:About
    }
  ]
})

Home.vue

<template>
  <div>
    Home
  </div>
</template>


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