Detaillierte Erläuterung der Vue-Router-Instanz

Ich habe gerade ein Unternehmensprojekt mit vue-cli geschrieben. Es wird als mittleres bis großes Projekt angesehen. Ich hoffe, dass es hilfreich ist Ich werde es später nach und nach an alle weitergeben. Kommen wir ohne weitere Umschweife direkt zum Code! !

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/css/common.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '',
  components: { App }
})

index.js im Router-Ordner

import Vue from 'vue'
import Router from 'vue-router'
import home from '../components/home'    //这里可以选择2种写法，一种是写在这里，一种是写在component里面，看下方代码~

Vue.use(Router)

export default new Router({
      mode:'history',
      routes: [
        {
          path: '/',
          component: home
        },
        {
            path:'/pagevue',
            component:pagevue => require(['../components/childCom/pagevue.vue'], pagevue),
        },
        {
            path:'/nextpagevue',
            component:nextpagevue => require(['../components/childCom/nextpagevue.vue'], nextpagevue),
        }
    ]
})

home.vue

<template>
 <div class="homeMain">
 <div>我是首页</div>
 <div class="routerName">点我进下一个路由</div>
 </div>
 </template>
 <script>
 export default{
 data(){
 return{  }
 },
 methods:{
 clickMe(){
 this.$router.push({path:'/pagevue'})
 }
 }
 }
 </script>
 <style>
 </style>

pagevue.vue

 <template>
 <div class="homeMain">
 <div>我是子页面</div>
 <div class="routerName">点我继续进下一个路由</div>
 </div>
 </template>
 <script type="text/javascript">
 export default{
 methods:{
 returnhome(){
 this.$router.push({path:'/nextpagevue'})
 }
 }
 }
 </script>

nextpagevue.vue

 <template>
 <div class="homeMain">
 <div>我是另外一个子页面</div>
 <div class="routerName">点我回到首页</div>
 </div>
 </template>
 <script type="text/javascript">
 export default{
 methods:{
 clickGohome(){
 this.$router.push({path:'/'})
 }
 }
 }
 </script>

common.css

* {
  margin: 0;
  padding: 0; }
.homeMain {
  text-align: center;
  margin-top: 100px; }
  .homeMain .routerName {
    color: #1eb89c;
    border: 1px solid #1eb89c;
    margin-top: 20px; }

/*# sourceMappingURL=common.css.map */

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vue-Router-Instanz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!