vue-router

2023-10-27 10:05:22

下载

npm install vue-router@4

基本配置与使用

/src/router/index.js

import {createRouter, createWebHashHistory} from 'vue-router'

import Home from '../components/Home'
import About from "../components/About";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {path: '/', component: Home},
    {path: '/about', component: About}
  ]
})


export default router

createRouter 创建一个路由实例
createWebHashHistory 创建一个 hash 历史记录
创建两个路由需要的组件 /src/components/Home.vue 和 /src/components/About.vue

<template>
<div>
  <p>Home</p>
</div>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style scoped>

</style>

<template>
<div>
  <p>About</p>
</div>
</template>

<script>
export default {
  name: "About"
}
</script>

<style scoped>

</style>

name 的取值需要独一无二，用于缓存组件时使用

import { createApp } from 'vue'
import App from './App.vue'
import store from "./store"; // 引入
import router from "./router";
const app = createApp(App)
app
  .use(store) // 使用vuex插件
  .use(router) // 使用router 插件
app.mount('#app')

在 main.js 文件中引入路由实例，并通过 app.use 使整个应用支持路由

<template>
  <h1>我是APP组件</h1>
  <div>
    <router-link to="/">home</router-link>
    <router-link to="/about">about</router-link>
  </div>
  <router-view></router-view>
</template>

<script>
export default {
}
</script>

通过 router-view 组件配置路由出口
通过 router-link 组件的 to 属性取值配置路由切换

嵌套路由

修改 /src/router/index.js 文件

import {createRouter, createWebHashHistory} from 'vue-router'

import Home from '../components/Home'
import About from "../components/About"
import A from '../components/A'
import B from '../components/B'
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {path: '/', component: Home},
    {
      path: '/about',
      component: About,
      children: [
        {path: 'a', component: A},
        {path: 'b', component: B},
      ]
    }
  ]
})


export default router

在 children 选项里面配置子路由
子路由的 path 不能写 / ， vue 会在判断子路由时自动加上 /

<template>
<div>我是A组件</div>
</template>

<script>
export default {
  name: "A"
}
</script>

<style scoped>

</style>

<template>
<div>我是B组件</div>
</template>

<script>
export default {
  name: "B"
}
</script>

<style scoped>

</style>

<template>
<div>
  <p>About</p>
  <div><router-link to="/about/a">跳转到A</router-link></div>
  <div><router-link to="/about/b">跳转到B</router-link></div>
  <router-view></router-view>
</div>
</template>

<script>
export default {
  name: "About"
}
</script>

<style scoped>

</style>

给 about 配置子路由也需要写路由出口 router-view

传递query参数

<template>
<div>
  <p>About</p>
  <div><router-link :to="`/about/a?name=${name}&message=${message}`">跳转到A</router-link></div>
  <div><router-link to="/about/b">跳转到B</router-link></div>
  <router-view></router-view>
</div>
</template>

<script>
export default {
  name: "About",
  data() {
    return {
      name: '我是a',
      message: '这是a的消息'
    }
  },
}
</script>

<style scoped>

</style>

<template>
<div>我是A组件</div>
</template>

<script>
export default {
  name: "A",
  created() {
    console.log(this.$route.query);
  }
}
</script>

<style scoped>

</style>

通过 this.$route.query 拿到 query 的参数
通过 router-link 组件的 to 属性的对象写法传递 query 参数

<template>
<div>
  <p>About</p>
  <div><router-link :to="{path: '/about/a', query: {name, message}}">跳转到A</router-link></div>
  <div><router-link to="/about/b">跳转到B</router-link></div>
  <router-view></router-view>
</div>
</template>

<script>
export default {
  name: "About",
  data() {
    return {
      name: '我是a',
      message: '这是a的消息'
    }
  },
}
</script>

<style scoped>

</style>

给 to 属性传递一个对象的这种写法在传递 query 参数时简单易用

命名路由

import {createRouter, createWebHashHistory} from 'vue-router'

import Home from '../components/Home'
import About from "../components/About"
import A from '../components/A'
import B from '../components/B'
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {path: '/', component: Home,},
    {
      path: '/about',
      component: About,
      children: [
        {path: 'a', component: A, name: 'a'},
        {path: 'b', component: B},
      ]
    }
  ]
})


export default router

在配置项中添加 name ，该路由称为命名路由

<template>
<div>
  <p>About</p>
  <div><router-link :to="{name: 'a', query: {name, message}}">跳转到A</router-link></div>
  <div><router-link to="/about/b">跳转到B</router-link></div>
  <router-view></router-view>
</div>
</template>

<script>
export default {
  name: "About",
  data() {
    return {
      name: '我是a',
      message: '这是a的消息'
    }
  },
}
</script>

<style scoped>

</style>

通过 router-link 组件的 to 属性，传递一个对象，给对象指定 name 属性来跳转，与路由配置文件中的 name 对应

传递params参数

import {createRouter, createWebHashHistory} from 'vue-router'

import Home from '../components/Home'
import About from "../components/About"
import A from '../components/A'
import B from '../components/B'
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {path: '/', component: Home,},
    {
      path: '/about',
      component: About,
      children: [
        {path: 'a/:name/:message', component: A, name: 'a'},
        {path: 'b', component: B},
      ]
    }
  ]
})


export default router

在路由配置文件中， path 路径中配置 : 来指定 params 参数

<template>
<div>
  <p>About</p>
  <div><router-link :to="`/about/a/${name}/${message}`">跳转到A</router-link></div>
  <div><router-link to="/about/b">跳转到B</router-link></div>
  <router-view></router-view>
</div>
</template>

<script>
export default {
  name: "About",
  data() {
    return {
      name: 'zhangsan',
      message: 'msg'
    }
  },
}
</script>

<style scoped>

</style>

<template>
<div>我是A组件</div>
</template>

<script>
export default {
  name: "A",
  created() {
    console.log(this.$route.params);
  }
}
</script>

<style scoped>

</style>

通过 this.$route.params 拿到 params 参数

<template>
<div>
  <p>About</p>
  <div><router-link :to="{name: 'a', params: {name, message}}">跳转到A</router-link></div>
  <div><router-link to="/about/b">跳转到B</router-link></div>
  <router-view></router-view>
</div>
</template>

<script>
export default {
  name: "About",
  data() {
    return {
      name: 'zhangsan',
      message: 'msg'
    }
  },
}
</script>

<style scoped>

</style>

在 router-link 组件中， to 属性的对象写法也可以传递 params 参数
传递的是 params 参数，不能写 path 来指定路径，只能写 name 来跳转路由

传递 props 参数

对象写法

import {createRouter, createWebHashHistory} from 'vue-router'

import Home from '../components/Home'
import About from "../components/About"
import A from '../components/A'
import B from '../components/B'
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {path: '/', component: Home,},
    {
      path: '/about',
      component: About,
      children: [
        {path: 'a/:name/:message', component: A, name: 'a', props: {a: 1, b: 2}},
        {path: 'b', component: B},
      ]
    }
  ]
})


export default router

在路由配置文件中，给配置项写 props 来给组件传递参数

<template>
<div>我是A组件 {{a}} --- {{b}}</div>
</template>

<script>
export default {
  name: "A",
  props: ['a', 'b'],
  beforeCreate() {
    console.log(this.a, this.b)
  }
}
</script>

<style scoped>

</style>

组件内通过 props 选项来接收

布尔值写法

import {createRouter, createWebHashHistory} from 'vue-router'

import Home from '../components/Home'
import About from "../components/About"
import A from '../components/A'
import B from '../components/B'
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {path: '/', component: Home,},
    {
      path: '/about',
      component: About,
      children: [
        {path: 'a/:name/:message', component: A, name: 'a',props: true},
        {path: 'b', component: B},
      ]
    }
  ]
})


export default router

<template>
<div>我是A组件 {{name}} --- {{message}}</div>
</template>

<script>
export default {
  name: "A",
  props: ['name', 'message'],
  beforeCreate() {
    console.log(this.name, this.message)
  }
}
</script>

<style scoped>

</style>

路由文件中 props 取值为 true 时会将该路由组件收到的所有 params 参数，以 props 的形式传递给组件

函数写法

import {createRouter, createWebHashHistory} from 'vue-router'

import Home from '../components/Home'
import About from "../components/About"
import A from '../components/A'
import B from '../components/B'
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {path: '/', component: Home,},
    {
      path: '/about',
      component: About,
      children: [
        {path: 'a/:name/:message', component: A, name: 'a',props: ($route) => ({...$route.query, ...$route.params})},
        {path: 'b', component: B},
      ]
    }
  ]
})


export default router

通过回调函数将该路由组件的 params 参数和 query 参数传递给 props

编程式路由导航

组件内部通过 this.$router 来实现

this.$router.push({name: 'a', params: {name: 'zhangsan', message: 66}, query: {age: 9999}})

跳转时并传递 params 参数和 query 参数
this.$router.back() 回退一步
this.$router.forward() 向前一步
this.$router.go(3) 向前3步

缓存路由组件

使用 keep-alive 组件包裹需要缓存的组件

  <router-view v-slot="{Component}">
    <keep-alive :include="['A']">
      <component :is="Component"></component>
    </keep-alive>
  </router-view>

缓存 A 组件

  <router-view v-slot="{Component}">
    <keep-alive>
      <component :is="Component"></component>
    </keep-alive>
  </router-view>

缓存所有组件
让不展示的路由组件保持挂载不被销毁

  activated() {
    console.log(' keep-alive 缓存的组件激活时调用');
  },
  deactivated() {
    console.log(' keep-alive 缓存的组件失活时调用');
  }

缓存组件内部有两个生命周期函数

全局前置路由守卫

router.beforeEach((to,form,next) => {
  console.log(to, form);
  next()
})

每次路由跳转之前被调用

全局后置路由守卫

router.afterEach((to, from) => {
  console.log(to, from);
})

每次路由切换之后被调用

独享路由守卫

beforeEnter: (to, from, next) => {
  console.log(to, from);
  next()
}

给某个路由配置单独写一个

组件内守卫

  // 通过路由规则 进入该组件时被调用
  beforeRouteEnter(to, from, next) {
    console.log(to, from);
    next()
  },
  // 通过路由规则 离开该组件时被调用
  beforeRouteLeave(to, from, next) {
    console.log(to, from);
    next()
  },

写在组件内部的守卫

history和hash路由模式区别

hash 路由的改变不会发送请求到后端
history 路由的改变会发送请求到后端，使用 connect-history-api-fallback 插件可以解决刷新 404 问题

const history = require('connect-history-api-fallback');
app.use(history())

在加载静态资源之前使用该中间件

码农公寓

下载

基本配置与使用

嵌套路由

传递query参数

命名路由

传递params参数

传递 props 参数

对象写法

布尔值写法

函数写法

编程式路由导航

缓存路由组件

全局前置路由守卫

全局后置路由守卫

独享路由守卫

组件内守卫

history和hash路由模式区别

相关文章