vue router路由（三）

當環境搭建及Vue語法與指令都有所了解，該說下router。

build目錄是打包配置文件 （不建議動）

config是vue項目基本配置文件

dist是構建后文件

js 手動創建 （根據需要）

node_modules 根據package.json 安裝依賴模塊

src資源文件，基本文件都會放在這里

app.vue  父組件

main.js 入口文件

static構建好的文件會在這個目錄

index.html 主頁

 

1、首先安裝路由通過npm:

npm install vue-router

在main.js文件中，引入路由(router)   './router'找到當前目錄router

main.js

import Vue from 'vue'
import App from './App' import router from './router'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  data:{
    urlPath : rootPath.pathUrl()
  },
  mounted: function(){
    //alert(JSON.stringify(this.urlPath))
  }
})

 

router/index.js  可以對vue-router引入，路由控制跳轉都會在這里處理

import Vue from 'vue'
import Router from 'vue-router'
//import VueResource from 'vue-resource'
//import Hello from '@/components/Hello'

Vue.use(Router)
//Vue.use(VueResource)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'A',
      component: require('../components/A')
    },

   {
      path: '/', name: 'B', component: require('../components/B') }

] })

 

組件 components/A.vue  結構如下

<template>
   <div id='demo'>  這里僅有一個外層標簽
        
   </div>
   <script>
       export default{
         data: function(){
          return{....}
         }
       }
   </script>
   <style>
       .....
   </style>  

</template>

 

組件A

<template>
  <div>  <!---只允許有一個最外層標簽 ！-->
    <div>
      <p>{{message}}</p>
      <p><router-link :to="{ path: '/B'}">跳轉B組件</router-link></p>
    </div>
  </div>
</template>
<script>
  export default {
    data: function () {
      return {
        message: 'vue好帥！'
      }
    }
  }
</script>

點擊調整B組件

通過<router-link>

 

 

 單頁面通過路由與組件來完成。

 

注意下，app.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

 

接下來，傳參使用