vue2基础之vue-router

vue2基础之vue-router

准备

• vue2匹配vue-router3

  npm install vue-router@3
  

• 引入router

  在项目中新建router文件夹并新建index.js 在js中写以下代码

  import Vue from "vue";
  import  VueRouter from "vue-router"
  
  Vue.use(VueRouter)
  
  const routes = [
      {
          path:"/",
          redirect:'/routerA'
      },
      {
          path:'/routerA',
          //使用路由懒加载
          component:()=>import('../views/routerA.vue')
      },
      {
          path:'/routerB/:id',
          component:()=>import('../views/routerB.vue')
      },
      {
          path:'/routerC',
          component:()=>import('../views/routerC.vue')
      }
  ]
  
  const router = new VueRouter({
      mode:'history',
      routes
  })
  
  export default router
  

• 在main.js中挂载

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  
  Vue.config.productionTip = false
  
  new Vue({
    router,
    render: h => h(App),
  }).$mount('#app')
  

• 在APP页面中设置routerView

  <template>
    <div id="app">
      <h1>路由练习</h1>
      <router-view></router-view>
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'App',
    components: {
    }
  }
  </script>
  
  <style>
  body{
    margin: 0;
  }
  </style>
  
  

• 设置路由导航守卫

  新建permission文件

  import router from "./router";
  
  // 在跳转之前做什么
  router.beforeEach((to,from,next)=>{
      console.log("to",to);
      console.log("from",from);
      next()
  })
  
  // 在跳转之后做什么
  router.afterEach((to,from)=>{
      console.log("to",to);
      console.log("from",from);
  })
  

  并引入main.js

  import Vue from 'vue'
  import App from './App.vue'
  import router from './router'
  import "./permission.js"
  
  Vue.config.productionTip = false
  
  new Vue({
    router,
    render: h => h(App),
  }).$mount('#app')
  

导航

声明式导航

• router-link跳转

<template>
    <div>
        routerA
        <!-- router-link跳转 -->
        <router-link to="/routerB">toB</router-link>
    </div>
</template>

<script>
    export default {
        name: 'routerA',
        data() {
            return {
                
            }
        },
        methods: {
                
        },

    }
</script>

<style lang="less" scoped>
                
</style>

编程式导航

1. router.push( )

   <template>
       <div>
           routerB
           <button @click="toC()">toC</button>
       </div>
   </template>
   
   <script>
       export default {
           name: 'routerB',
           data() {
               return {
                   
               }
           },
           methods: {
               //router.push( )
               toC() {
                   this.$router.push('/routerC')
               }    
           },
   
       }
   </script>
   
   <style lang="less" scoped>
                   
   </style>
   

2. router.go(n)

   n正数为前进，负数为后退

   <template>
       <div>
           routerC
           <button @click="toB()">toB</button>
       </div>
   </template>
   
   <script>
       export default {
           name: 'routerC',
           data() {
               return {
                   
               }
           },
           methods: {
               //router.go(n)
               toB() {
                   this.$router.go(-1)
               }    
           },
   
       }
   </script>
   
   <style lang="less" scoped>
                   
   </style>
   

3. router.replace( )

   不会像history中添加记录

   <template>
       <div>
           routerC
           <button @click="toA()">toA</button>
       </div>
   </template>
   
   <script>
       export default {
           name: 'routerC',
           data() {
               return {
                   
               }
           },
           methods: {
               toA() {
                   //router.replace( )
                   this.$router.replace('/routerA')
               }    
           },
   
       }
   </script>
   
   <style lang="less" scoped>
                   
   </style>
   

路由对象传值

• params传值

  1. 在router中配置

     import Vue from "vue";
     import  VueRouter from "vue-router"
     
     Vue.use(VueRouter)
     
     const routes = [
         {
             path:"/",
             redirect:'/routerA'
         },
         {
             path:'/routerA',
             component:()=>import('../views/routerA.vue')
         },
         {
             path:'/routerB/:id',
             //配置
             component:()=>import('../views/routerB.vue')
         },
         {
             path:'/routerC',
             component:()=>import('../views/routerC.vue')
         }
     ]
     
     const router = new VueRouter({
         mode:'history',
         routes
     })
     
     export default router
     

  2. 在导航中配置声明式与编程式完全相同

     <template>
         <div>
             routerA
     		<!-- 配置 -->
             <router-link to="/routerB/5">toB</router-link>
         </div>
     </template>
     
     <script>
         export default {
             name: 'routerA',
             data() {
                 return {
                     
                 }
             },
             methods: {
                     
             },
     
         }
     </script>
     
     <style lang="less" scoped>
                     
     </style>
     

  3. 取值

     ps:注意是route不是router

     <template>
         <div>
             routerB
             <button @click="toC()">toC</button>
             <!-- 取值 -->
             {{ $route.params.id}}
         </div>
     </template>
     
     <script>
         export default {
             name: 'routerB',
             data() {
                 return {
                     
                 }
             },
             methods: {
                 toC() {
                     this.$router.push('/routerC')
                 }    
             },
         }
     </script>
     
     <style lang="less" scoped>
                     
     </style>
     

• query传值

  1. 配置

     <template>
         <div>
             routerB
             <button @click="toC()">toC</button>
             {{ $route.params.id}}
         </div>
     </template>
     
     <script>
         export default {
             name: 'routerB',
             data() {
                 return {
                     
                 }
             },
             methods: {
                 toC() {
                     //配置
                     this.$router.push('/routerC?type=666')
                 }    
             },
         }
     </script>
     
     <style lang="less" scoped>
                     
     </style>
     

  2. 取值

     ps:注意是route不是router

     <template>
         <div>
             routerC
             <button @click="toB()">toB</button>
             <button @click="toA()">toA</button>
             <!-- 取值-->
             {{ $route.query.type }}
         </div>
     </template>
     
     <script>
         export default {
             name: 'routerC',
             data() {
                 return {
                     
                 }
             },
             methods: {
                 toB() {
                     this.$router.go(-1)
                 },
                 toA() {
                     this.$router.replace('/routerA')
                 }    
             },
     
         }
     </script>
     
     <style lang="less" scoped>
                     
     </style>
     

     ​