Detailed explanation of vue-router instance

I just recently wrote a company project using vue. It was built using vue-cli. It can be considered a medium and large-scale project. Then I would like to record and share the knowledge points here. I hope it will be helpful to everyone. It’s helpful, I will share it gradually in the future; without further ado, let’s go straight to the 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 */
newVue({
  el: '#app',
  router,
  template: '',
  components: {App}
})

index.js in the router folder

import Vue from 'vue'
import Router from 'vue-router'
import home from '../components/home' //You can choose 2 writing methods here, one is to write here, the other is to write in the component, see the code below~

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>I am the homepage</div>
 <div class="routerName">Click me to enter the next route</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>I am a subpage</div>
 <div class="routerName">Click me to continue to the next route</div>
 </div>
 </template>
 <script type="text/javascript">
 export default{
 methods:{
 returnhome(){
 this.$router.push({path:'/nextpagevue'})
 }
 }
 }
 </script>

nextpagevue.vue

 <template>
 <div class="homeMain">
 <div>I am another subpage</div>
 <div class="routerName">Click me to return to the homepage</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 */

The above is the detailed content of Detailed explanation of vue-router instance. For more information, please follow other related articles on the PHP Chinese website!