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>

HomeMessage

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

Homenews

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