路由

 

 

 1、路由通信传值

 

• 路由通信是通过路由跳转用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
          }
        ]
      })

      2、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>

          4、子组件向父组件通信

          • 子组件向父组件通信是通过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>
          

          5、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>