Vue-2 路由

vue2-路由

    单页应用SPA：它可以动态重写当前的页面来与用户交互，而不需要重新加载整个页面,做到了前后端分离
    路由：在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

1. 路由使用细节

   手动安装:

   1. 安装

      npm i vue-router 路由3x版本对应vue2x 4x对应vue3x
      

   2. 创建router路由文件夹，在router文件夹中创建index.js文件,配置路由信息

      //导入、集成
      import Vue from "vue"; //vue核心
      import VueRouter from "vue-router"; //路由插件
      Vue.use(VueRouter); // 集成vueRouter插件
      //导出并实例化路由对象，创建规则
      export const router = new VueRouter({
        routes: [
          {
            name: "home",//命名路由
            path: "/",//路径路由
            component: Home,//Home组件需提前 引入
            // component:()=>import('@/components/xxx') 懒加载
          },
            {
                ...
            }
        ],
      });
      

   3. main.js使用router路由规则

      import router from "./router";
      new Vue({
          router,
          render: h => h(App)
      }).$mount('#app')
      

   4. 路由组件输出位置

   cli安装

   在创建脚手架的时候勾选即可,vue会自动创建相应路由
   

2. 路由导航

   1. 声明式导航

      tag=“a” 默认生成a标签 也可以生成其他标签 如div

      <router-link to="/home" tag="a">Home</router-link>
      

   2. 编程式导航

      <button @click="onGoHome">首页</button>
      <router-view></router-view>
      <script>
          export default {
              methods:{
                  onGoHome(){
                      // $router 代表的就是  new VueRouter()实例
                      // 这里就是 编程式导航的路由跳转
                      // this.$router.push('/home')  // 这里是第一种写法
                      
                      this.$router.push({path:'/home'})  // 也可以传入一个对象 第二种写法
      			}
      }
      </script>
      

3. 路由分类

   命令路由和路径路由

       {
         name: "home",//命名路由
         path: "/",//路径路由
         component: Home,
       },
   

4. 路由传参

         
   //query
   this.$router.push({path:'/detail',query:{id:'1003'}})
   
   //resultful风格 data 动态传参
   <router-link :to="{path:'/product/detail/1003'}">商品3</router-link> 
   //路由规则 index.js
   const router = new VueRouter({
     routes: [
       {
         name: "ProductDetail",
         path: "/product/detail/:id", //路由规则 动态参数
         component: Detail,
       },
     ],
   });
   //xxx.vue
     created(){//使用route接收
       //  this.msg = this.$route.query.message  //接收query参数 与get类似 在地址后面加?value=value
        this.msg = this.$route.params.message  //接收params参数 与post传参类似
       //  console.log('route', this.$route);
     },
   

5. 嵌套路由

   // 引入 对应的组件
   import Home from '.../Home.vue'
   import Center from '.../Center.vue'
   
   // 引入对应的组件
   import Child1 from '.../Child1.vue'
   import Child2 from '.../Child2.vue'
   
   const routes=[
       {
           path:'/home',  
           component:Home,
   // 嵌套路由就是 给路由添加一个 children 属性，属性值是一个数组，数组中在书写路由的配置即可
           children:[
               {
                   path:'child1',  // 注意这儿的书写
                   component:Child1
               },
               {
                  path:'child2', // 注意这儿的书写
                  component:Child2  
               }
           ]
       },
        {
           path:'/center',  
           component:Center
       },
   ]
   

6. 命名视图

   一个path对应多个component

   // 引入 对应的组件
   import Home from '.../Home.vue'
   import Center from '.../Center.vue'
   import Slide from '.../Slide.vue'
   
   const routes=[
       {
           path:'/home',  
   //这里就是命名视图，当路径是 /home 的时候，会显示下面的两个组件，需要页面做一些设置
           components:{
               default:Home,
               slider:Slide
           }
       },
        {
           path:'/center',  
           component:Center
       },
   ]
   

7. 路由重定向

   就是在匹配不到对应的路径的时候，就跳转到指定的路径；路由是从上往下匹配的，重定向一般写在最后面；

   // 引入 对应的组件
   import Home from '.../Home.vue'
   import Center from '.../Center.vue'
   
   const routes=[
       {
           // 基本的路由 配置 只需要这样两个属性即可
           path:'/home',  
           component:Home
           children:[
               {
                   path:'child1',  // 注意这儿的书写
                   component:Child1
               },
               {
                  path:'child2', // 注意这儿的书写
                  component:Child2  
               },
       		{
   // 嵌套组件的路由重定向
                  path:'/home',
           	   redirect:'/home/child1' 
   			}
           ]
       },
        {
           path:'/center',  
           component:Center
       },
       {
   // 在上面的路由都不匹配的时候，就重定向到 /home  然后加载对应的组件
           path:'*',
           redirect:'/home'
       }
   ]
   

8. 路由懒加载

       {
         name: "home",//命名路由
         path: "/",//路径路由
         component:()=>import('@/components/xxx')//懒加载
       },
   

9. 路由元信息

   import Home  from '.../Home'
   
   const routes=[
       {
           path:'/home',
           component:Home,
           // meta 里面的信息就是路由元信息
           // 路由元信息中可以包含 图标 ，label 
           meta:{
               isAuthentication:true,
           }
       }
   ]
   

10. 路由传参的三种方式

    1. 动态路由传参-刷新不会丢失参数

       const routes=[
           {
               path:'/detail/:id',
               name:'detail',
               component:Detail
           }
       ]
       

       声明式传参:

       <router-link to="/detail/123">详情页</routerlink>
       

       <router-link :to="{name:'detail',params:{id:123}}">详情页</routerlink>
       

       <router-link :to="{name:'detail',query:{id:123}}">详情页</routerlink>
       

       编程式导航传参

       <button @click="OnGoDetail">
           详情页
       </button>
       <script>
       methods:{
           OnGoDetail(){
               // 编程式导航的第一种写法，直接拼接参数
               // this.$router.push("/detail/123")
               //	this.$router.push("/detail/"+变量名)
               // 第二种写法
               // this.$router.push({name:'detail',params:{id:123}})
               
               // 第三种写法
                this.$router.push({name:'detail',query:{id:123}})
       	}
       }
       </script>
       

    2. query-刷新不会丢失参数

       const routes=[
           {
               path:'/detail', 
               name:'detail',
               component:Detail
           }
       ]
       

       <router-link :to="{name:'detail',query:{id:123}}">详情页</routerlink>
       

       <button @click="OnGoDetail">
           详情页
       </button>
       <script>
       methods:{
           OnGoDetail(){this.$router.push({name:'detail',query:{id:123}})
       	}
       }
       </script>
       

    3. 第三种传参方式-params-刷新会丢失参数

       const routes=[
           {
               path:'/detail', 
               name:'detail',
               component:Detail
           }
       ]
       

       声明式导航

       <router-link :to="{name:'detail',params:{id:123}}">详情页</routerlink>
       
       <router-view></router-view>
       

       编程式导航

       <button @click="OnGoDetail">
           详情页
       </button>
       <script>
       methods:{
           OnGoDetail(){this.$router.push({name:'detail',params:{id:123}})
       	}
       }
       </script>
       

       小总结:
       - 使用动态路由传递参数：直接拼接，query，name配合params 都可以，都不会丢失参数。
       
       - 第二，三种传参方式：定义路由规则的时候，没有配置动态路由，那么只能query传参和params传参，params传递的参数看不到，安全性好，但是刷新数据会丢失；但是query传递参数是拼接在链接之后，所以刷新之后不会丢失，这种场景就是和需要分享的链接，可以保证拿到链接的人能看到数据和分享的人一样。