vue-cli教程(二) 路由

vue路由使用vue-router，在教程一中已經安裝，而且有相關示例

vue-router官方文檔：https://router.vuejs.org/zh-cn/ 

   主頁面的App.vue中的<vue-router></vue-router>保存最上級的index

    子組件的vue中的<vue-router></vue-router>包含的是children的信息

routes:[
    {
        path:"/index",
        name:"mycomponent",
        component:MyComponent,
        children:[
            {
                path:"index1",    //不要加斜槓
                name:"index1",
                component:MyComponent2
            }
        ]
    }
]

路由的訪問：

    html標籤：<a href="#/index/index1"></a>

    或 <router-link to='/index/index1'></router-link>

    js方法：

        window.location.href='#/index/index1' ，

        或：this.$router.push({path:'/index/index1'}) ......

  全局監聽路由變化:

        watch:{

             $route:function(new,old){

                console.log(new,old);

            }

        }

        前置路由，後置路由，生命週期函數，文檔裏面都有，請參考文檔

注意：

        vue中路由存在兩個值 this.$router 和this.$route 至於爲啥存在兩個我也不清楚，求大神解釋^-^

        this.$router 主要是執行動做的時候調用，如 跳轉，前進，後退

        this.$route  主要爲獲取參數，如 this.$route.hash,this.$route.match等

 

 

若是沒有使用，或者教程一中一不當心，沒安裝vue-router，就進行如下操做：

    cnpm install vue-router --save

路由的使用：

    除了教程一中的系統默認的方法加載路由，還有其餘的方法

    1.在components裏面寫上本身的組件MyComponent.vue

<template>
    <div>
        這個是個人組件  ，我隨便寫的
    </div>
</template>
<script>
    export default{
        name:"MyComponent"  //不要也行
    }
</script>

    2.建立route的文件夾，寫上index.js,貼上如下代碼

import Vue from 'vue'
import Router from 'vue-router'
import MyComponent from "../components/MyComponent.vue"
Vue.use(Router);

export default new Router({
    routes:[
        {
            path:"/index",
            name:"mycomponent",
            component:MyComponent
        }
    ]
})

3.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.vue'
import router from './route/index.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    template: '<App/>',
    components: { App },
    router:router                  //若是鍵名稱和import的模塊名稱同樣也叫router，鍵能夠不寫。換名字的必定要寫router:***
})

4.App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <hello></hello>
    <router-view></router-view>  <!---->
  </div>
</template>

<script>
import Hello from './components/Hello'

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>