vue-vue 路由

第八章 实现Vue规模化路由的使用

1. 深入理解路由的概念

简介：深入理解路由的概念

• 定义

  • 路由（route）就是一组映射关系： key-value ，key 为路径，value 为 component 组件 ，由 router 管理

  • 结合生活中的路由

    • 在生活的路由器中 LAN 代表 路径，通过网线与LAN连接的 电脑 代表 组件

• 工作流程

  • 当 router 检测到路径发生改变时，就会将当前页面替换成对应的组件

    • # 为哈希
    • # 后面为地址 无刷新地进行跳转

2. 玩转路由的基本使用

简介：玩转路由的基本使用

• 效果展示

  

• 路由的使用

  • 安装

    npm i vue-router
    

  • 安装 less 预处理器

    npm i less less-loader --save-dev
    

  • 创建路由器文件

    // router/index.js
    import VueRouter from 'vue-router';
    import Home from '../components/Home';
    import Course from '../components/Course';
    
    export default new VueRouter({
      routes: [
        {
          path: '/home',
          component: Home,
        },
        {
          path: '/course',
          component: Course,
        },
      ],
    });
    

  • 引入应用

    // main.js
    // 引入
    import VueRouter from 'vue-router';
    import router from './router/index';
    
    Vue.use(VueRouter)
    
    new Vue({
      el: '#app',
      render: (h) => h(App),
      router: router,
    });
    

  • 切换

    首页
    

  • 展示

3. 深度剖析路由的嵌套

简介：深度剖析路由的嵌套

• 路由的嵌套

  • 配置

    {
      path: '/course',
      component: Course,
      children: [
        {
          path: '/front',
          component: Front,
        },
        {
          path: '/back',
          component: Back,
        },
      ],
    },
    

  • 跳转

    前端
    

• 路由组件

  • 由路由控制的组件

  • 新建 pages 文件夹存放路由组件

• 切换之后的组件去哪了

  • 被销毁 （通过在destroyed生命周期函数中打印字符串来验证切换后的组件被销毁了）

4. 实现路由的传参上

简介：实现路由的传参上

1. query 传参

• 字符串

  
      前端
  
  

  

• 对象

  
    前端
  
  

• 获取

  this.$route.query.text
  

5. 实现路由的传参下

简介：实现路由的传参下

• params 传参

  • 路由器声明 params 传参

    // router/index.js
    {
      name: 'qianduan',
      path: 'front/:text', //字符串形式传参时需加占位符告知路由器，此时是参数
      component: Front,
    },
    

• 字符串

  
    前端
  
  

• 对象

  
    前端
  
  

• 获取

  this.$route.params.text
  

• 注意

  • 字符串形式传参时需加占位符告知路由器， 在路径后面是参数
  • path 对应的是 query 属性，name 对应的是 params 属性

• replace

  • 删除路由之前的历史记录

    
      后端
    
    

6. 怎么实现编程式路由导航？

简介：深度剖析编程式路由导航

• 为什么要用编程式导航

  • 当导航跳转不使用声明式跳转时（如：button标签）
  • 不通过事件触发路由跳转

• 编程式导航

  • push 写法

    toFront() {
      this.$router.push({
        name: "qianduan",
        params: {
          text: this.text,
        },
      });
    },
    

  • replace 写法

    toFront() {
      this.$router.replace({
        name: "qianduan",
        params: {
          text: this.text,
        },
      });
    },
    

  • 路由的前进后退

    this.$router.forward() 	//前进
    this.$router.back() 		//后退
    this.$router.go() 			//前进：正数1、2 或者后退：负数-1、-2
    

7. 实际开发中必备的路由缓存和全局前置路由

简介：深度剖析路由缓存和全局前置路由

• 路由缓存

  • 效果展示

  • 定义

    • 让不展示的路由组件保持挂载在页面，不被销毁

    • 写法

      //注意 Front 是组件的名字
         
        
      
      

• 全局前置路由

  • 作用

    • 对路由组件进行权限控制

  • 配置

    {
      path: 'front',
      component: Front,
      meta: { isAuth: true },
    },
    {
      path: 'back',
      component: Back,
      meta: { isAuth: true },
    },
    

    router.beforeEach((to, from, next) => {		// 
      if (to.meta.isAuth) {
        if (localStorage.getItem('isShow' === '1')) {
          next();
        } else {
          alert('暂无权限观看');
        }
      } else {
        next();
      }
    });