Heim  >  Artikel  >  System-Tutorial  >  Detaillierte Erläuterung der Vue-Router-Instanz

Detaillierte Erläuterung der Vue-Router-Instanz

WBOY
WBOYnach vorne
2024-03-16 09:28:22765Durchsuche

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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:linuxprobe.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen