new

11_vue-cli/project/src/App.vue

@@ -3,8 +3,10 @@
     <nav>
       <router-link to="/">Home</router-link> |
       <router-link to="/about">About</router-link> |
-      <!-- <router-link to="/course">Course</router-link> -->
-      <router-link :to="{path:'/course',query:{name:'zs',age:18}}">Course</router-link>
+      <router-link to="/course">Course</router-link> |
+      <!-- <router-link :to="{path:'/course',query:{name:'zs',age:18}}">Course</router-link> -->
+      <!-- <router-link :to="{name:'Course',params:{name:'lisi',age:20}}">Course</router-link> -->
+      <!-- <router-link :to="{name:'Course',query:{name:'zs',age:18}}">Course</router-link> -->
       <!-- 
         to:{
           path:'/course',
@@ -16,11 +18,19 @@
 
         :to="{path:'/course',query:{name:'zs',age:18}
         http://localhost:8080/course?name=zs&age=18
-        
+
         query传参 可以在地址里
         页面刷新的时候  数据不丢失
+        可以通过path  也可以通过name
+
+        params传参 必须通过name
+        页面刷新的时候  数据丢失
 
+        url传参 参数拼接在地址里 刷新页面数据不丢失 
+        通过$route.params接收参数
+        在router.js里面设置
       -->
+      <router-link to="/ccc">Detail</router-link>
     </nav>
     <router-view/>
   </div>

11_vue-cli/project/src/router/index.js

@@ -4,6 +4,7 @@ import HomeView from '../views/HomeView.vue'
 import Course from '../views/Course.vue'
 import Fe from '../views/Fe.vue'
 import Rd from '../views/Rd.vue'
+import Detail from '../views/Detail.vue'
 
 Vue.use(VueRouter)
 
@@ -33,6 +34,12 @@ const routes = [
       name: 'Rd',
       component: Rd
     }]
+  },{
+    path:'/detail',
+    name: 'Detail',
+    component: Detail,
+    // redirect: '/about'
+    alias:'/ccc'
   }
 ]
 

11_vue-cli/project/src/store/index.js

@@ -5,12 +5,28 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    count: 10,
+    price: 20
   },
   getters: {
+    amount(state){
+      return state.count * state.price
+    }
   },
   mutations: {
+    add(state,data){
+      state.price += data
+    },
+    reduce(state){
+      state.count--
+    }
   },
   actions: {
+    reduces({commit}){
+      setTimeout(()=>{
+        commit('reduce')
+      },1500)
+    }
   },
   modules: {
   }

11_vue-cli/project/src/views/Course.vue

@@ -11,8 +11,9 @@
         age:18
       }
     -->
-
-
+    <!-- <h1>名字: {{$route.params.name}}</h1>
+    <h1>年龄: {{$route.params.age}}</h1> -->
+    <!-- <h1>id: {{$route.params.id}}</h1> -->
 
 
     <router-link to="/course/fe">Fe</router-link> |

11_vue-cli/project/src/views/Detail.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h1>我是detail</h1>
+    <button @click="goBack">后悔</button>
+    <button @click='goForward'>前进</button>
+    <button @click='goHome'>回到首页</button>
+  </div>
+</template>
+
+<script>
+export default {
+  methods:{
+    goBack(){
+      this.$router.go(-1)
+    },
+    goForward(){
+      this.$router.go(1)
+    },
+    goHome(){
+      this.$router.push('/about')
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

11_vue-cli/project/src/views/Fe.vue

@@ -1,12 +1,46 @@
 <template>
   <div>
     <h2>我是FE</h2>
+    <h2>值: {{count}}</h2>
+    <h2>价格: {{price}}</h2>
+    <h2>总价：{{amount}}</h2>
+    <button @click='addHandle'>点击++</button>
+    <button @click='reduceHandle'>减减</button>
   </div>
 </template>
 
 <script>
+import {mapActions, mapGetters, mapMutations, mapState} from 'vuex'
 export default {
+  computed:{
+    // number(){
+    //   return this.$store.state.count
+    // },
+    // price(){
+    //   return this.$store.state.price
+    // },
+    ...mapState(['count','price']),
+    // amount(){
+    //   return this.$store.getters.amount
+    // }
+    ...mapGetters(['amount'])
+  },
+  methods:{
+    // addHandle(){
+    //   this.$store.commit('add',5)
+    // },
+    addHandle(){
+      this.add(5)
+    },
+    ...mapMutations(['add']),
+    ...mapActions(['reduces']),
+    reduceHandle(){
+      // this.$store.commit('reduce')
+      // this.$store.dispatch('reduces')
+      this.reduces()
+    }
 
+  }
 }
 </script>