02.vue-router的进阶使用

关键字：路由懒加载，全局导航守卫，组件导航守卫，redirect重定向，keep-alive，params，query

---

一、目录结构

          

二、index.js 

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// 一般加载方法
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

// 路由懒加载方法(ES6)
const Home = () => import('../components/Home');
const HomeNews = () => import("../components/HomeNews");
const HomeMessage = () => import("../components/HomeMessage");

const About = () => import("../components/About");
const User = () => import('../components/User');
const Profile = () => import('../components/Profile');

// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter);

// 2.创建VueRouter对象
const routes = [
  {
    path: '',
    // redirect重定向(到默认页面)
    // redirect: '/home'
    redirect: '/home',
    meta:{
      title: '首页'
    }
  },
  {
    path: '/home',
    component: Home,
    meta : {
      title: '首页'
    },
    children: [
      {
        path: '',
        redirect: "news",
      },
      {
        path: 'news',
        component: HomeNews,
      },
      {
        path: "message",
        component: HomeMessage,
      },
    ]
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: "关于"
    }
  },
  {
    path: '/user/:userId',
    component: User,
    meta:{
      title: '用户'

    }
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '档案'
    }
  }
];
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  // mode: 'history',默认是hash
  mode: 'history',
  // linkActiveClass: 'active' 
  // 统一简化class-active成active
  linkActiveClass: "active"
});

// guard (守卫，警卫)
// 全局导航守卫，传一个函数
// 前置守卫(也叫前置钩子hook)
router.beforeEach((to,from,next) => {
  // 从from路由跳到to路由
  // to就是meta的对象
  document.title = to.matched[0].meta.title;
  console.log("前置导航守卫");
  // 原先会自动执行next(),但我们现在重新创建了beforeEach，所以必须手动执行下next(),
  next()
});

// 全局后置钩子
router.afterEach(()=>{
  console.log("后置导航守卫");
});

// 3.将router对象传入到Vue实例
export default router

三、main.js

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

Vue.config.productionTip = false;

// 全局Vue类下定义一个实例,可全局访问
Vue.prototype.Test001 = function () {
  console.log("Test001")
};
Vue.prototype.Name001 = "zwnsyw";

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

四、App.vue

<template>
  <div id="app">
    <h2>我是APP组件</h2>
    <!-- tag(定义渲染成什么标签)、replace(浏览器返回按钮不可用) 、active-class(活跃时添加class类active)-->
    <!--<router-link to="/home" tag="button" replace active-class="active">首页</router-link>-->
    <!--<router-link to="/about" tag="button" replace active-class="active">关于</router-link>-->
    <!--<router-link to="/home" tag="button" replace>首页</router-link>-->
    <!--<router-link to="/about" tag="button" replace>关于</router-link>-->
<!--    <button @click="homeClick">首页</button>-->
<!--    <button @click="aboutClick">关于</button>-->
    <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link>
    <router-link v-bind:to="'/user/'+userId">用户</router-link>
<!--    <router-link :to="{path: '/profile',query:{name: 'zwnsyw', age: 18, height: 1.88}}">档案</router-link>-->
    <button @click="profileClick">档案</button>

<!--    保持活跃状态，不要每次都重新创建-->
<!--    excloud是排除某些控件，让这些控件频繁的创建和销毁,两个之间不可加空格-->
    <keep-alive exclude="Profile,User">
      <router-view></router-view>
    </keep-alive>

  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      userId: "lisi",
      img: 'http'
    }
  },
  methods: {
    homeClick() {
      // 通过代码的方式修改路由 vue-router
      // push => pushState
      // this.$router.push('/home')
      this.$router.replace('/home')
      console.log('homeClick');
    },
    aboutClick() {
      // this.$router.push('/about')
      this.$router.replace('/about')
      // this.$router.push('/about')
      console.log('aboutClick');
    },
    profileClick(){
      this.$router.push({
        path: '/profile',
        query: {
          name: 'kobe',
          age: '45',
          height: '1.98'
        }
      })
    }
  }
}
</script>

<style>
  /*.router-link-active {*/
    /*color: #f00;*/
  /*}*/

  .active {
    color: #f00;
  }
</style>

五、Home.vue

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页内容, 哈哈哈</p>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: "Home",
    data(){
      return{
        path: "/home/news"
      }
    },
    // 这两个函数，只有该组件被保持了状态，使用了keep-alive时，才是有效的
    // 组件活跃的时候回调
    activated() {
      this.$router.push(this.path);
      console.log("activated");
    },

    // 组件不活跃，销毁的时候回调
    deactivated(){
      console.log("deactivated");
    },
    // 组件导航守卫
    beforeRouteLeave(to , from, next){
      this.path = this.$route.path;
      next()
    },
  }

</script>

<style scoped>

</style>

<template>
  <div>
    <ul>
      <li>消息1</li>
      <li>消息2</li>
      <li>消息3</li>
      <li>消息4</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "HomeMessage"
  }
</script>

<style scoped>

</style>

<template>
  <div>
<!--    ul>li{新闻$}*4-->
    <ul>
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
    </ul>
    <button @click="btn_test">访问自定义全局实例</button>
  </div>
</template>

<script>
  export default {
    name: "Homenews",
    methods:{
      btn_test(){
        console.log(this.Test001());
        console.log(this.Name001)
      }
    }
  }
</script>

<style scoped>

</style>

六、About.vue

<template>
  <div>
    <h2>我是关于</h2>
    <p>我是关于内容, 呵呵呵</p>
  </div>
</template>

<script>
  export default {
    name: "About"
  }
</script>

<style scoped>

</style>

七、User.vue

<template>
  <div>
    <h2>我是用户</h2>
    <p>我是用户内容，嘿嘿嘿</p>
    <h2>{{userId}}</h2>
    <h2>{{$route.params.userId}}</h2>
  </div>
</template>

<script>
  export default {
    name: "User",
    computed:{
      userId(){

        // 所有的组件都继承于Vue类的原型

        // route 拿到的是当前活跃的路由对象
        // router 拿到的是index.js里面new出来的总路由对象
        return this.$route.params.userId  // parameters(参数)
      }
    }
  }
</script>

<style scoped>

</style>

八、Profile.vue

<template>
<div>
  <h2>我是Profile组件</h2>
  <h2>{{$route.query}}</h2>
  <h2>{{$route.query.name}}</h2>
  <h2>{{$route.query.age}}</h2>
  <h2>{{$route.query.height}}</h2>
</div>
</template>

<script>
  export default {
    name: "Profile"
  }
</script>

<style scoped>

</style>