vue2生态之vue-router

提示：个人学习和总结，如有错误欢迎指正

---

一、vue-router的使用

1、安装

npm install vue-router@3

vue-router3在vue2中使用，vue-router4在vue3使用

2、使用

在src文件夹下新建router/index.js文件

import VueRouter from "vue-router";
const router = new VueRouter({
  mode: "hash",
  // mode: "history",
  routes: [
  ]
})
export default router

mode: “hash”，哈希模式，项目地址路径会带#
mode: “history”,history模式，项目地址不带#

在main.js中添加如下代码

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

二 、vue-router的参数有几种方式

1、query写法，路径xxx?id=xx&&title=xxx

<template>
  <div>
    <p>to的写法query</p>
  <ul>
      <li v-for="item in newList" :key="item.id">
        <router-link
          :to="{
            //name:'news1',
            path: '/news1',
            query:{
              id:item.id,
              title:item.title
            }
        }">
        {{item.id}}--{{item.title}}
        </router-link>
      </li>
  </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newList:[{
        id:1,
        title:'学习vue-router'
      },
      {
        id:2,
        title:'学习vue生态'
      }]
    }
  },
}
</script>

对应的router

const router = new VueRouter({
  routes: [
    {
      name: 'news1',
      path: '/news1',
      component: () => import('../pages/News1.vue'),
    },
  ]
})

2、params写法，路径xxx/id/title

<p>to的写法param</p>
  <ul>
      <li v-for="item in newList" :key="item.id">
        <router-link
          :to="{
            name:'news2',
            params:{
              id:item.id,
              title:item.title
            }
        }">
        {{item.id}}--{{item.title}}
        </router-link>
      </li>
  </ul>

对应的router

const router = new VueRouter({
  routes: [
    {
      name: 'news2',
      path: '/news2/:id/:title',
      component: () => import('../pages/News2.vue'),
    },
  ]
})

三、vue-router的2种跳转方式

1、this.$router.push(“url”)

goDetail1() {
  this.$router.push("/news1/newsDetail")
  this.$router.push({
    name: 'newsDetail'
  })
},

2、this.$router.resolve 新开页打开

goDetail2() {
  let routerData = this.$router.resolve({
    path:'/news1/newsDetail'
  })
  console.log(routerData)
  window.open(routerData.href)
}

四、导航守卫

1、全局前置守卫，全局后置守卫

在router/index.js中，设置全局前置守卫和全局后置守卫。
beforeEach进入路由之前，afterEach进入路由之后。

// 全局路由守卫-前置路由
router.beforeEach((to, from, next) => {
  console.log(to)
  console.log(from)
  if ((to.name == 'home') || (to.name == 'news1')) {
    console.log('全局路由守卫-前置路由工作')
    next()
  }
})
// 全局路由守卫-后置路由
router.afterEach((to, from) => {
  console.log(to, from, '全局路由守卫-前置路由工作')
})

2、独享前置守卫

为某一个路由设置独享前置守卫。单独路由只有独享前置守卫，没有独享后置守卫。

const router = new VueRouter({
  mode: "hash",
  routes: [
    {
      name: 'news1',
      path: '/news1',
      component: () => import('../pages/News1.vue'),
      // 嵌套路由
      children: [
        {
          path: 'newsDetail',
          component: () => import('../pages/NewsDetail.vue')
        }
      ],
      // 独享前置守卫
      beforeEnter: (to, from, next) => {
        console.log(to, from, next, '进入了new1页面')
        next()
      }
    },
  ]
})

3、组件内的守卫

在组件里可以单独的设置守卫，与methods，created等方法平级。路由进入守卫beforeRouteEnter，和路由离开守卫beforeRouteLeave。

beforeRouteEnter (to, from, next) {
    // ...
  console.log(to, from, next,'@@@@进入news1')
  next()
},
beforeRouteLeave (to, from, next) {
  // ...
  console.log(to, from, next,'@@@@离开new1')
  next()
}

4、缓存路由组件，新增2个生命周期

keep-alive可以缓存组件，也可以缓存路由组件。
缓存的路由组件，在路由进入后，被激活触发生命周期activated。在跳转走后，不会被销毁，是失活状态，触发生命周期deactivated。
new1.vue

<template>
  <div>
    <p>我是新闻页面</p>
    <p @click="goDetail1">{{$route.query.id}}--{{$route.query.title}}</p>
    <p @click="goDetail2">新开页打开-{{$route.query.id}}--{{$route.query.title}}</p>
    <keep-alive>
    // 这里展示newsDetail组件
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

newsDetail组件

  activated() {
    console.log('我是newsDetail组件，我被激活了')
  },
  deactivated() {
    console.log('我是newsDetail组件，我被失活了')
  },

五、路由的prop设置

1、props: true

会把params的参数，以key-value形式传递给路由组件。路由组件通过props定义key，就可以接受value的值。但是query参数无法传递。

routes:[
{
  name: 'news2',
   path: '/news2/:id/:title',
   component: () => import('../pages/News2.vue'),
   props: true
 },
 ]

New2页面使用

<template>
  <div>
    <p>我是新闻页面</p>
    我是props传递的参数{{id}}@@@{{title}}
    <!--<p>{{$route.params.id}}--{{$route.params.title}}</p>-->
  </div>
</template>

<script>
export default {
  props:['id','title'],

2、props:{xx: xxx},props当成普通一个对象去传递，路由组件里通过props去接受参数。

但是这样的普通对象，里面的key和value都是固定的了，不灵活。

3、props写成函数的形式，函数包含一个实参route，返回一个对象。

这样的写法的好处是，params和query参数，都可以传递。

routes: [
{
   name: 'news1',
   path: '/news1',
   component: () => import('../pages/News1.vue'),
   children: [
     {
       name: 'newsDetail',
       path: 'newsDetail',
       component: () => import('../pages/NewsDetail.vue')
     }
   ],
   beforeEnter: (to, from, next) => {
     console.log(to, from, next, '进入了new1页面')
     next()
   },
   // props: true, 第一种写法
   // props: {  第二种写法
   //   name: '张三'
   // },
   // 第三种写法
   props(route) {
     // console.log(route)
     return {
       id: route.query.id,
       title: route.query.title
     }
   }
  },
 ]

在news1页面，用props接收参数就可以用了。

<template>
  <div>
    我是props传递的参数{{id}}@@@{{title}}
  </div>
</template>

<script>
export default {
  props:['id','title'],