vue-router實例詳細講解-Linux-PHP中文網

首頁

系統教程

Linux

vue-router實例詳細講解

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Mar 16, 2024 am 09:28 AM

linux linux教程紅帽 linux系統 linux指令 linux認證紅帽linux linux視頻

vue-router實例詳細講解

最近剛剛用vue寫了個公司項目，使用vue-cli構建的，算是中大型項目吧，然後這裡想記錄並且分享一下其中的知識點，希望對大家有幫助,後期會逐漸分享；話不多說，直接上代碼！！

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 }
})

登入後複製

router資料夾裡面的index.js

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 */

登入後複製

以上是vue-router實例詳細講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn