Vue进阶(2)

1. vue-router 的一级配置

1. 下载路由， 之前在创建项目时已经安装,项目已经自动创建好了router.js

2. router.js写上切换的路由配置

3. 将vue文件放在views，页面级的组件放在views

4. 在router.js进行引用 import Film from ‘@/views/Film’ @代表指向src文件的别名

5. 在main.js中把router引入进来并配置 import router from ‘./router’
   在new Vue中配置 router：router, 如果两者相同，可以省略为router,

6. 在主vue文件中，即App.vue中，div标签放入 <router-view></router-view>类似于插槽

   出现必须为字符串 可以在开头加上/* eslint-disable */
   main.js

import Vue from 'vue' // ES6 模块导入方式
import App from './App.vue'
import router from './router'
// import store from './store'

Vue.config.productionTip = false

new Vue({
  router, // router:router
  // store,
  render: h => h(App)
}).$mount('#box')

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Film from '@/views/Film'
import Cinema from '@/views/Cinema'
import Center from '@/views/Center'
import Nowplaying from '@/views/Film/Nowplaying'
import Comingsoon from '@/views/Film/Comingsoon'
import Detail from '@/views/Detail'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/film',
      component: Film,
      children: [
        {
          path: '/film/nowplaying',
          component: Nowplaying
        },
        {
          path: '/film/comingsoon',
          component: Comingsoon
        },
        {
          path: '',
          redirect: '/film/nowplaying'
        }
      ]
    },
    {
      path: '/cinema',
      component: Cinema
    },
    {
      path: '/center',
      component: Center
    },
    {
      path: '/detail/:myid', // /detail/aa 动态路由
      component: Detail
    },
    {
      path: '/*',
      redirect: '/film'
    }
  ]
})

export default router

2.路由声明式导航

vue支持两种模式
    1.hash #/home
    2.history /home
 路由守卫&&路由拦截
    1.全局拦截
    2.单个拦截

路由原理
    1.hash路由==》location.hash切换
        window.onhashchange 监听路径的切换
    2.histor路由==》history。pushState切换
        window.onpopstate 监听路径的切换
        
Vue.js is detected on this page.
Open DevTools and look for the Vue panel.
扩展程序里面打开允许访问文件网址打开
要解决 这个问题，则是因为没有开启debug  mode，所以要对vue开启debug  mode

在main.js中书写下面形式：
import Vue from 'vue'
Vue.config.devtools = true
stringmust

路由切换高亮显示 <router-link>

Tabbar.vue

<template>
    <nav>
        <!-- 声明式导航 -->
        <ul>
            <router-link to='/film' tag='li' activeClass='myactive'>film</router-link>
            <router-link to='/cinema' tag='li' activeClass='myactive'>cinema</router-link>
            <router-link to='/center' tag='li' activeClass='myactive'>center</router-link>
        </ul>
    </nav>
</template>

<style lang="scss" scoped>
    .myactive {
        color:red;
    }
</style>

3.二级路由一级重定向

重定向
{
path: “*”,
redirect: “/home”
}
二级路由,新建个film文件夹，将comingsoon.vue与nowplaying.vue放在里面组成父子关系
在router.js中要引用要配置路由的vue文件
一级vue文件中要留有插槽<router-view>

{
      path: '/film',
      component: Film,
      children: [
        {
          path: '/film/nowplaying',
          component: Nowplaying
        },
        {
          path: '/film/comingsoon',
          component: Comingsoon
        },
        {
          path: '',
          redirect: '/film/nowplaying'
        }
      ]
    },

4.动态路由

{
path: ‘/detail/:id’, // /detail/aa 动态路由
component: Detail
},

Detail.vue

<template>
    <div>detail</div>
</template>
<script>
export default {
  mounted () {
    console.log('要Id获取详情信息', this.$route.params.id)
  }
}
</script>

5.命名路由

{
  path: '/detail/:id', // /detail/aa 动态路由
  name: 'xiaomi',
  component: Detail
},

Nowplaying.vue

<template>
    <div>
        nowplaying
        <ul>
            <li v-for='data in dataList' :key='data' @click="handleChangePage(data)">
                {{data}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: ['111', '222', '333']
    }
  },
  methods: {
    handleChangePage (id) {
      console.log(id)
      //  编程式导航-路径跳转
      //   this.$router.push(`/detail/${id}`)
      // 编程式导航-名字跳转
      this.$router.push({ name: 'xiaomi', params: { id: id } })
    }
  }
}
</script>

6.history模式

默认是：mode:‘hash’ 有＃号
去掉＃号，在router.js中加上
mode:'history’
不过这种模式要玩好，还需要后台配置支持，因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问,就会返回404，这就不好看了。
所以呢，你要在服务器增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面

7.路由守卫&路由拦截

{
path: ‘/*’,
redirect: ‘/film’
}

router.js
// 全局守卫
router.beforeEach((to, from, next) => {
// console.log(to);
if (to.path === ‘/center’) {
console.log(‘盘查’)
if (auth.isLogin()) {
next()
} else {
next(’/login’)
}
} else {
next()
}
})

组件内的守卫

beforeRouteEnter,进入路由前。需要注意这里不能使用this,因为我们使用的是进入路由之前，那会组件还没创建，得不到this这个属性，所有我们只能使用过vm异步语句来让节点上树；
beforeRouteLeave：离开路由之前可以被调用，可以访问里面的this属性！
为大家奉上导航守卫完整的解析流程

导航被触发。

在失活的组件里调用离开守卫。

调用全局的 beforeEach 守卫。

在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

在路由配置里调用 beforeEnter。

解析异步路由组件。

在被激活的组件里调用 beforeRouteEnter。

调用全局的 beforeResolve 守卫 (2.5+)。

导航被确认。

调用全局的 afterEach 钩子。

触发 DOM 更新。

用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。