路由

 

 

 一、路由通訊傳值

 

• 路由通訊是經過路由跳轉用query把參數帶過去，也是vue經常使用的通訊手段。

  例子：

• 建立並在路由註冊一個組件Head

• <template>
    <div id="head">
          <button @click="handleChange">clickMe</button> //給按鈕綁定點擊事件
    </div>
   
  </template>
  
  <script> export default { name: 'Head', data () { return { } }, mounted(){ }, updated(){ }, methods:{ handleChange(){ this.$router.push({ path:"/about" , query:{ text:"我是阿格斯之盾" } }) //路由跳轉，並用query帶過去參數  } } } </script> <style scoped> </style>

  • 建立另外一個組件About並在路由註冊

  • <template>
      <div id="about">
        <p>我是關於頁:{{ message }}</p><button type="button" @click="handleChange">回到首頁</button>  //顯示接收過來的數據
      </div>
     
    </template>
    
    <script> export default { name: 'About', data () { return { message: "" } }, mounted(){ this.message = this.$route.query.text //在生命週期中接收傳過來的數據  }, updated(){ }, methods:{ handleChange(){ this.$router.push({ path: "/" }) //點擊返回首頁  } } } </script> <style scoped> </style>

     

  • • 路由註冊的簡單代碼

      import Vue from 'vue'
      import Router from 'vue-router'
      import Head from '@/components/Head'
      import About from '@/components/About'
      
      Vue.use(Router)
      
      export default new Router({
        mode: "history",  
        routes: [
          {
            path: '/',
            name: 'Head',
            component: Head
          },{
            path: '/about',
            name: 'About',
            component: About
          }
        ]
      })

      二、sessionStorage本地緩存通訊

    • • 仍是列舉上面的例子，將它們稍微改一改就能夠了，路由配置都同樣的。sessionStorage的特色就是瀏覽器關掉緩存就會消失，這是它區別於localStorage的。

        例子：

      • Heade代碼：

      •  1 <template>
         2   <div id="head">
         3         <button @click="handleChange">clickMe</button>
         4   </div>
         5  
         6 </template>
         7 
         8 <script>
         9 export default { 10  name: 'Head', 11  data () { 12 return { 13 14  } 15  }, 16  updated(){ 17 18  }, 19  methods:{ 20  handleChange(){ 21 this.$router.push({ path:"/about"}) 22  }, 23  message(){ 24 var message = "我是阿格斯之盾" 25  sessionStorage.setItem('text', message) //建立緩存 26  } 27  }, 28  mounted(){ 29 this.message(); 30  } 31 } 32 </script> 33 <style scoped> 34 35 </style>

        • About代碼：

        • <template>
            <div id="about">
              <p>我是關於頁:{{ message }}</p><button type="button" @click="handleChange">回到首頁</button>
            </div>
           
          </template>
          
          <script>
          
          export default { name: 'About', data () { return { message: "" } }, mounted(){ this.message = sessionStorage.getItem("text") //讀取緩存  }, updated(){ }, methods:{ handleChange(){ this.$router.push({ path: "/" }) } } } </script> <style scoped> </style>

          四、子組件向父組件通訊

          • 子組件向父組件通訊是經過emit事件發送的，話很少說，直接上案例，仍是利用上面的案例稍做修改
          • About子組件代碼：

          <template> <div id="about"> <button @click="handleChange">點擊發送消息給父組件</button> </div> </template> <script> export default { name: 'About', props:{ 'text':[] }, data () { return { message: "" } }, mounted(){ }, updated(){ }, methods:{ handleChange(){ this.$emit( "child-message" , "我是阿格斯之盾" ) //提交信息 } } } </script> <style scoped> </style> 

          • Head父組件代碼

          <template> <div id="head"> <About @child-message = "handleText"></About> //這裏傳過來父組件須要用一個方法接住 <p>來自子組件的消息：{{message}}</p> </div> </template> <script> import About from '@/components/About.vue' export default { name: 'Head', components:{ About }, data () { return { message : "" } }, mounted(){ }, methods:{ handleText(data){ //這裏的data就是子組件傳過來的內容 this.message = data } } } </script> <style scoped> </style> 

          五、vuex狀態管理

          • 狀態管理使用起來相對複雜，可是對於大型項目確實很是實用的。

            (1)安裝vuex，並創建倉庫文件

          npm install vuex -s

          • 安裝事後在src文件中建立store文件夾，並創建index.js文件，index.js的代碼以下：

          import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { message: '我是阿格斯之盾' }, mutations: { MESSAGE_INFO (state,view) { state.message = view; } } }) export default store

          （2）在min.js中註冊store倉庫

          • 代碼以下：

          import Vue from 'vue' import App from './App' import router from './router' import store from './store' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' }) 

          （3）狀態的讀取和提交

          • 仍是使用上面的案例，咱們以子組件About提交改變狀態，父組件Head接受狀態並顯示出來
          • 下面是About組件提交狀態

          <template> <div id="about"> <button @click="handleChange">點擊發送消息給父組件</button> </div> </template> <script> export default { name: 'About', props:{ 'text':[] }, data () { return { message: "" } }, mounted(){ }, updated(){ }, methods:{ handleChange(){ this.$store.commit("MESSAGE_INFO" , "我是火車王") //提交改變狀態 } } } </script> <style scoped> </style> 

          • Head組件接受狀態：

          <template> <div id="head"> <About></About> <p>來自子組件的消息：{{this.$store.state.message}}</p> //直接使用this.$store.state.message接受數據顯示 </div> </template> <script> import About from '@/components/About.vue' export default { name: 'Head', components:{ About }, data () { return { message : "" } }, mounted(){ }, methods:{ } } </script> <style scoped> </style>