vue-router的实际运用 以及复习some forEach reduce的运用

创建路由模块 在src的源代码目录下，新建一个router/index.js的路由模块，并初始化如下的代码

安装路由的包

 cnpm i vue-router@3.5.2 -S

导入axios包

cnpm i axios -S

// 导入vue 和vuerouter的包

import Vue from 'vue'

import VueRouter from 'vue-router'


// 调用Vue.use()函数，把VueRouter安装为Vue插件

Vue.use(VueRouter)


// 创建路由的实例对象 

const router = new VueRouter()


// 向外共享路由的实例对象

export default router

在main.js内部编辑，将路由用起来

import Vue from 'vue'
import App from './App.vue'

// 导入路由模块，目的：拿到路由的实例对象
import router from '@/router/index.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 在vue项目中，要想把路由用起来，就必须把路由实例对象进行挂载
  // router：路由的实例对象
  router: router//挂载路由
}).$mount('#app')

router下js文件的实际运用

// 导入vue 和vuerouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

// 调用Vue.use()函数，把VueRouter安装为Vue插件
Vue.use(VueRouter)

// 创建路由的实例对象
const router = new VueRouter({
  // router是一个数组，定义哈希地址与组件的对应关系
  routes:[
    // {path: '路径', component:要展示的组件}
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }
  ]
})

// 向外共享路由的实例对象
export default router

路由的重定向

路由的重定向指的是：用户访问A地址的时候，强制用户跳转到C地址，通过路由的redirect属性，指定一个新的路由地址

// 创建路由的实例对象
const router = new VueRouter({
  // router是一个数组，定义哈希地址与组件的对应关系
  routes:[
    // {path: '路径', component:要展示的组件}
    // 重定向的路由规则
    { path: '/' ,redirect:'/home'},
        // 路由规则
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }

  ]
})

路由的嵌套

// 导入vue 和vuerouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

// 导入需要的子组件

import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

// 调用Vue.use()函数，把VueRouter安装为Vue插件
Vue.use(VueRouter)

// 创建路由的实例对象
const router = new VueRouter({
  // router是一个数组，定义哈希地址与组件的对应关系
  routes:[
    // {path: '路径', component:要展示的组件}
    // 重定向的路由规则
    { path: '/' ,redirect:'/home'},
        // 路由规则
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About, children: [
      {path: 'tab1', component: Tab1},
      {path: 'tab2', component: Tab2},
    ]}

  ]
})

// 向外共享路由的实例对象
export default router

复习

这是forEach和some方法的筛选

这是forEach和some方法的筛选
    <script>
        const arr = [1,2,3,4,5]
        // forEach循环一旦开始，无法在中间被停止，如果数据过多，十分浪费性能
        arr.forEach((item,index)=>{
            console.log('ok');
            if(item === 4){
                console.log(index);
            }
        })

        // some寻找数组的方法，可是通过return true的固定语法，来终止循环
        arr.some((item,index)=>{
            console.log('ok');
            if(item === 2){
                console.log(index);
                return true
            }

        })
    </script>

这是every判断方法  

这是every判断方法    
<script>
        // every就是判断数组中的每一项都等于true
  const arr = [
      { id: 1, name: '西瓜', state: true },
      { id: 2, name: '榴莲', state: true },
      { id: 3, name: '草莓', state: true },
    ]
    // 判断数组中水果是否都被全选了
    const result = arr.every(item => item.state === true)
    console.log(result);
    </script>

这是reduce方法

<script>
          const arr = [
      { id: 1, name: '西瓜', state: true, price: 10, count: 1},
      { id: 2, name: '榴莲', state: false, price: 10, count: 2},
      { id: 3, name: '草莓', state: true, price: 10, count: 3},
    ]
    // 对总的价钱进行一个累加
    // filter把数组进行筛选，然后将筛选出来的数组放到一个新的数组里面
    // 方法一
    let sum = 0
    arr.filter(item => item.state === true).forEach((item)=>{
        sum += item.price * item.count
    })
    console.log(sum);
    // 方法二
    // redecu也会循环里面的项
    // reduce((累加的结果，当前循环项) => {},初始值)
    let amt = 0
   const result =  arr.filter(item => item.state).reduce((amt, item)=>{
       return amt += item.price * item.count
    },0)
    console.log(result);

    </script>