vue-router(Vue路由详细使用)

简介：vue-router是Vue.js官方提供的路由管理器，用于构建单页面应用程序（SPA）和多页面应用程序（MPA）。

1.【路由的安装与配置】

1.1 打开命令行工具，进入项目的根目录。安装VueRouter。

// 使用npm安装
npm install vue-router

// 使用yarn安装
yarn add vue-router

1.2 定义路由 

// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  // 重定向
  {
    path: '/',
    redirect: '/home' //将路径重定向到 '/home'
  },
  // 首页
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/home/index'),
  }
  // 1号-停车场列表
  {
    path: '/list1/:name/:age',//路由传参时是params方式-字符串传参，所以这里用这种方式接收参数
    name: 'list1',
    component: () => import('../views/index/list1'),
  },
  // 2号-停车场列表
  {
    path: '/list2',
    name: 'list2',
    component: () => import('../views/index/list2'),
  },
  // 停车场详情
  {
    path: '/parkingDetail',
    name: 'parkingDetail',
    component: () => import('../views/detail/parkingDetail'),
    children: [
      {
        //子路由配置项，与父级配置项一样，实现路由的嵌套功能
      }
    ]
  }
]

export default new VueRouter({
  mode: 'history',
  routes,
})

1.3 配置路由

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/router';

Vue.use(router)

new Vue({
  router, //将路由器添加到Vue实例中
  render: h => h(App)
}).$mount('#app')

2.【路由的三种使用情况】

2.1 声明式

• router-link是vue-router提供的一个全局组件
• router-link实质上最终会渲染成a链接，to属性等价于提供 href属性(to无需#)
• router-link提供了声明式导航高亮的功能(自带类名)

/** 
 * router-link声明式(代码例子)
 * 在控制台元素检查时会发现激活的类名 这个时候可以在样式style中定义高亮样式 点击时就会高亮
 */
<template>
  <div class="box">
    <div class="top">
      <router-link to="/home">首页</router-link>
      <router-link to="/list1">列表1</router-link>
      <router-link to="/list2">列表2</router-link>
    </div>
    <div class="bottom">
      <!-- 这里只是例子展示，真正项目中，下面的代码需要在哪里显示，就在写在哪里 -->
      <router-view></router-view>
    </div>
  </div>
</template>

// 1. query方式-字符串传参
<router-link to="/list1?name=张三&age=18">列表1</router-link>

// 1. query方式-对象传参
<router-link :to="{path: '/list1',query: {name: '小明', age: 12}}">列表1</router-link>

// 2. params方式-字符串传参
<router-link :to="'/list1/' + name + '/' + age">列表1</router-link>

// 2. params方式-对象传参
<router-link :to="{name: 'list1',params: {name: '小明', age: 12}}">列表1</router-link>

2.2 编程式(push)

 $router和$route的区别：前者只写对象(配置对象)，后者只读对象

// 路由传递参数时
<template>
  <div class="box">
    <!-- 实际开发中，这里传递的参数是去往详情页面的data或者id等 -->
    <button @click="goDetail(datas)">详情</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      goDetail(datas) {
        // 1. query方式(query可以与path搭配使用，也可以与name搭配使用)
        this.$router.push({
          path: "/parkingDetail",
          // name: 'parkingDetail',
          query: {datas: datas},
        })

        // 2.params方式(params只可以与name搭配使用)
        this.$router.push({
          name: "/parkingDetail",
          params: {datas: datas},
        })

        /**
         * 注意：在使用query方式的时候
         * 如果你尝试同时搭配path和name，Vue Router可能会选择其中一个进行导航，但不会报错。
         * 但是，由于这种方式容易导致不确定的行为，所以不建议这样做。最好根据你的需求选择其中一个选项。
         */
      },
    },
  }
</script>

// 路由接收参数时
<template>
  <div class="parkingDetail">
    <!-- 模版中不需要写this -->
    <div>{{ $route.query.datas }}</div>
    <!-- <div>{{ $route.params.datas }}</div> -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        myDatas: "",
      }
    },
    created() {
      // this.myDatas = this.$route.query.datas;
      this.myDatas = this.$route.params.datas;
    }
  }
</script>

2.3 编程式(replace)

功能用法：

• push与replace基本一样，就不写重复代码了。

主要区别：

• this.$router.push()：用于正常的路由导航，当你使用它时，新的路由会被添加到导航历史中，允许用户通过浏览器的后退按钮返回上一个页面。
• this.$router.replace()：也用于路由导航，但与push不同，replace方法不会在导航历史中添加新的路由记录，而是直接替换当前的路由记录。这意味着用户无法通过后退按钮返回到上一个页面。
• 这两个方法的选择取决于你的需求。如果你希望用户能够通过后退按钮返回上一个页面，使用push方法。如果你希望导航不会添加新的历史记录，并且替换当前页面的内容，使用replace方法。

3.【路由的导航守卫】

3.1 全局前置守卫

// 你可以使用 router.beforeEach 注册一个全局前置守卫
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

3.2 全局解析守卫

// 在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。
// 这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
const router = new VueRouter({ ... })
router.beforeResolve((to, from, next) => {
  // ...
})

3.3 全局后置钩子

// 你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：
router.afterEach((to, from) => {
  // ...
})

3.4 路由独享守卫

// 你可以在路由配置上直接定义 beforeEnter 守卫：
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
// 这些守卫与全局前置守卫的方法参数是一样的

3.5 组件内守卫

// 你可以在路由组件内直接定义以下路由导航守卫：
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}