vue知识点之router基础篇

一. 路由的概述

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换

二. 动态路由匹配

使用router-link标签进行导航, to属性表示指定的链接，router-link标签会被渲染成a标签。路由匹配到的组件在router-view中渲染出来，即这是路由的出口。

1. 路由匹配

☘️ 定义路由

Vue Router 3.x

// router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import BookDetails from "@/components/BookDetails.vue"
import BookDetailsTwo from "@/components/BookDetailsTwo.vue";

//1.注册路由
Vue.use(VueRouter)
//2.定义路由
const routes = [
    {
        path: '/BookDetails/:book_id',
        name: 'BookDetails',
        meta: { name: 'bookDetails' },
        component: BookDetails
    },
    {
        path: '/BookDetailsTwo/user/:username/book/:book_id',
        name: 'BookDetailsTwo',
        meta: { name: 'bookDetailsTwo' },
        component: BookDetailsTwo
    },
]
// 3. 创建 router 实例，然后传 `routes` 配置
export const router = new VueRouter({
    routes
})

// main.js
import Vue from 'vue'
import App from './App.vue'
import { router } from './router'

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Vue Router 4.x

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import BookDetails from "@/components/BookDetails.vue"
import BookDetailsTwo from "@/components/BookDetailsTwo.vue";

//1.定义路由
const routes = [
  {
      path: '/BookDetails/:book_id',
      name: 'BookDetails',
      meta: { name: 'bookDetails' },
      component: BookDetails
  },
  {
      path: '/BookDetailsTwo/user/:username/book/:book_id',
      name: 'BookDetailsTwo',
      meta: { name: 'bookDetailsTwo' },
      component: BookDetailsTwo
  },
]
// 2. 创建 router 实例，然后传 `routes` 配置
export const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes:routes
})

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
//3. 注册路由器插件
app.use(router)
app.mount('#app')

☘️ 跳转页面

<template>
  <div class="book">
    <router-link :to="{ 
        name: 'BookDetails', 
        params: { book_id: 1 } 
      }"
　　　 >跳转书籍详情</router-link><br/>

    <router-link
      :to="{
        name: 'BookDetailsTwo',
        params: { book_id: 1, username: '小嘟嘟' },
      }"
      >跳转高级书籍详情</router-link>

     /*路由匹配到的组件在router-view中渲染出来*/ 
    <router-view></router-view> 
  </div> 
</template>

点击跳转后的路由

http://localhost:8080/#/BookDetails/1
http://localhost:8080/#/BookDetailsTwo/user/小嘟嘟/book/1

跳转的页面接收路由参数（以第二个跳转为例）

<template>
  <div>
    <div>人员姓名：{{$route.params.username }}</div>
    <div>书籍Id：{{$route.params.book_id }}</div>
  </div>
</template>

2. 动态路由参数

能够传递参数的路由模式，由于能够传递参数，所以对应的路由数量是不确定的，因此叫做动态路由。

☘️ 怎么将参数作为路由传递呢？

在参数名前面加上“:”,然后将参数写在路由的path内。

{
    path: '/bookDetails/:id/:name',
},

路由传参的几种形式：params传参、query传参

1.<router-link :to="{name: 'bookDetails', params: {id:222, name: 'gmn'}}">动态路由传递多个参数，通过params传递参数</router-link>
2.<router-link :to="{path:'/bookDetailsTwo', query: {age:18}}">动态路由传递多个参数, 通过query传递参数</router-link>
3.<router-link :to="{name: 'bookDetails', params: {id:222,name:'gmn'}, query: {age: 18}}">动态路由params和query组合传参的</router-link>

对应的定义路由的形式：

{
    path: '/bookDetails/:id/:name',
    name: 'bookDetails',
    component: BookDetails
},
{
    path: '/bookDetailsTwo?', //“？”
    name: 'bookDetailsTwo',
    component: BookDetailsTwo
},
{
    path: '/bookDetails/:id/:name?',
    name: 'bookDetails',
    component: BookDetails
},

点击跳转后的路由

http://localhost:8080/#/bookDetails/1/gmn
http://localhost:8080/#/bookDetailsTwo/?age=18
http://localhost:8080/#/bookDetails/1/gmn?age=18

☘️ params和query的区别是什么呢？

1. 二者的认识

params:  /router1/:id，　　　  这里的id叫做params (参数在路径里)
query：   /router1?id=123,    这里的id叫做query （参数在?后）

2. 传参

params传参，要在路由的后面加上参数名，并且在传参的时候，参数名要跟路由后面设置的参数名对应。
query传参，则没有这个限制，直接在跳转里面传递参数就行，不需要在路由的后面加上对应的参数。
params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。

3. 地址栏中的区别

params传参在地址栏中不显示，query传参在地址栏中可见的。

params:

query:

3. 响应路由参数的变化

提醒一下，当使用路由参数时，例如从 /BookDetails/1 导航到 /BookDetails/2，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

存在问题

<!--BookDetails组件-->
<template>
  <div class="book-details">
    <div>书籍详情 Id：{{ $route.params.book_id }}</div><br/><br/>
    <router-link :to="{ name:'BookDetails',params: { book_id: 2}}">自己跳自己o(*￣▽￣*)ブ</router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created(){
    console.log('进入图书详情~~~') //自己调用自己时不会调用
  }
}
</script>

注意！！！当从父页面跳转过来时会执行生命周期，当点击组件里‘自己跳自己’时，并不会触发生命周期

解决方法

☘️ 方法一（使用watch (监测变化) $route 对象）

<!--BookDetails组件-->
<template>
  <div class="book-details">
    <div>书籍详情 Id：{{ $route.params.book_id }}</div><br/><br/>
    <router-link :to="{ name:'BookDetails',params: { book_id: 2}}">自己跳自己o(*￣▽￣*)ブ</router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created(){
    console.log('进入图书详情~~~')
  },
  watch:{
    '$route'(to, from) {
      console.log(to ,from, '路由监听')
    }
  }
}
</script>

结果:

☘️ 方法二（使用beforeRouteUpdate 导航守卫）

<!--BookDetails组件-->
<template>
  <div class="book-details">
    <div>书籍详情 Id：{{ $route.params.book_id }}</div><br/><br/>
    <router-link :to="{ name:'BookDetails',params: { book_id: 2}}">自己跳自己o(*￣▽￣*)ブ</router-link>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  created(){
    console.log('进入图书详情~~~')
  },
  beforeRouteUpdate(to, from, next){
    console.log(to, from, next,'导航守卫')
    next()
  },
  watch:{
    '$route'(to, from) {
      console.log(to ,from, '路由监听')
    }
  }
}
</script>

注意！！！用beforeRouteUpdate记得要写next()，否则不会跳转路由

4.其它动态路由匹配

☘️ 1. 捕获所有路由或 404 Not found 路由

在上面定义好的路由最后面添加新的路由

{
  path: '/Fruits*',
  name: 'FruitsBanana',
  component: FruitsBanana
},
{
  path: '*',
  name: 'NotFound',
  component: NotFound
}

注意！！！当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误

当我们输入路由

http://localhost:8080/#/FruitsApple

会匹配到‘/Fruits*’，所以会跳转到FruitsBanana组件

再次输入路由

http://localhost:8080/#/IAmVeryHappy

这时候就会匹配到 ‘*’，自然就进入到了写好的404页面(～￣▽￣)～

☘️ 2. 高级匹配模式

vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。

// 第一种（通过？的使用可以将参数变为可选项）
{
  path: '/PathToRegexp/:id?',
  name: 'PathToRegexp',
  component: PathToRegexp
}
// 第二种（使用正则，只匹配id是数字）
{
  path: '/PathToRegexp/:id(\\d+)',
  name: 'PathToRegexp',
  component: PathToRegexp
}

☘️ 3. 匹配优先级

有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。

{
  path: '/Fruits*',
  name: 'FruitsBanana',
  component: FruitsBanana
},
{
  path: '/Fruits*',
  name: 'FruitsPear',
  component: FruitsPear
}

如上面所示，谁先定义的，谁的优先级就最高，只要匹配成功，就会进入到FruitsBanana组件

三. 嵌套路由

Vue会自带一个是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套

路由

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  children: [
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

组件

<template>
  <div>
    我是水果页面<br/><br/><br/>
    <router-link :to="{ name:'Apple'}">苹果🍎</router-link><br/><br/><br/>
    <router-link :to="{ name:'Grape'}">葡萄🍇</router-link><br/><br/><br/>
    <router-view></router-view>
  </div>
</template>

✨ 当我们访问

http://localhost:8080/#/Fruits/Apple
http://localhost:8080/#/Fruits/Grape

就会更改组件里面<router-view></router-view>的容

✨ 当我们访问

http://localhost:8080/#/Fruits

的时候<router-view></router-view>是没用内容的(T_T)

✨ 解决方法

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  children: [
    {
      path:'',
      component: Strawberry
    },
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

没错加一个空的path，这时候访问

http://localhost:8080/#/Fruits

<router-view></router-view>就会显示Strawberry组件的内容(●ˇ∀ˇ●)

四. 编程式的导航

除了使用<router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

1. router.push

router.push(location, onComplete?, onAbort?)

注意！！！：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击时，这个方法会在内部调用，所以说，点击等同于调用 router.push(...)。

声明式	编程式
`<router-link :to="...">`	`router.push(...)`

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意！！！：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

同样的规则也适用于 router-link 组件的 to 属性。

2. `router.replace`

router.replace(location, onComplete?, onAbort?)

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录

声明式	编程式
`<router-link :to="..." replace>`	`router.replace(...)`

`3. router.go(n)`

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

五. 命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

路由

{
  path: '/user/:userId',
  name: 'user',
  component: User
}

用法

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
或者
router.push({ name: 'user', params: { userId: 123 }})

六. 命名视图

1. 常规命名视图

页面

<template>
  <div id="app">
    <router-view/>
    <router-view name="fruits"/>
    <router-view name="animal"/>
  </div>
</template>

路由

{
  path: '/',
  components: {
    default: Food, // 默认视图
    fruits:Pineapple,
    animal:Cat
  }
}

当我们访问路由

http://localhost:8081/#/

的时候，会渲染视图对应的组件

2. 嵌套命名视图

组件

<template>
  我是Food组件
  <router-view/>
  <router-view name="animal"/>
</template>

路由

{
  path: '/',
  component: Food,
  children: [
    {
      path: 'Milk',
      component: Milk
    },
    {
      path: 'Cat',
      components: {
        default: Fish,
        animal: Cat
      }
    }
  ]
}

访问路由

http://localhost:8081/#/Milk
// 渲染对应的 Milk 组件

http://localhost:8081/#/Cat
// 渲染对应的 Fish、Cat 组件

注意！！！有时候我们项目会有一个始终存在的导航栏，但是呢，登录页又不需要，这时候就可以使用命名视图

七. 重定向和别名

1. 重定向（redirect）

路由

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  redirect: '/Fruits/Apple'
  children: [
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

当我们访问

http://localhost:8080/#/Fruits

的时候，对自动跳转到

http://localhost:8080/#/Fruits/Apple

注意！！！上面有写到

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  children: [
    {
      path:'',
      component: Strawberry
    },
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    }
  ]
},

其中

{
  path:'',
  component: Strawberry
}
// 不会改变路由，只是会把<router-view/>默认显示到Strawberry组件
redirect: '/Fruits/Apple'
// 会改变路由到Apple

是不一样的

重定向的目标也可以是一个命名的路由

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  redirect: {name: 'Apple'},
  children: [
    {
      path: 'Apple',
      name: 'Apple',
      component: Apple
    },
    {
      path: 'Grape',
      name: 'Grape',
      component: Grape
    },
  ]
}

当我们访问

http://localhost:8080/#/Fruits

的时候，对自动跳转到

http://localhost:8080/#/Fruits/Apple

甚至是一个方法，动态返回重定向目标

{ 
  path: '/Fruits', 
  redirect: to => {
  // 方法接收 目标路由 作为参数
  // return 重定向的 字符串路径/路径对象
  }
}

2. 别名（alias）

/Fruits 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /Fruits，就像用户访问 /Fruits 一样

{
  path: '/Fruits',
  name: 'Fruits',
  component: Fruits,
  alias: '/b'
}

当访问

http://localhost:8080/#/b

实际上是访问的

http://localhost:8080/#/Fruits

但地址是不会变成/Fruits

八. 路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦

路由

{
  path: '/BookDetails/:book_id',
  name: 'BookDetails',
  component: BookDetails,
  props: true
}

BookDetails组件

<template>
  <div class="book-details">
    {{book_id}}
  </div>
</template>

<script>
export default {
  props: ['book_id'],
  data () {
    return {
    }
  }
}
</script>

1. 布尔模式

在路由配置中设置 props: true 时默认将 $route.params 数据传给组件，组件需要通过自身的 props 属性取出 params 中的属性

2. 对象模式

如果 props 是一个对象，其下所有属性均会被传入组件。需要注意的是当 props 必须是是静态的

路由

{
  path: '/BookDetails/:book_id',
  name: 'BookDetails',
  component: BookDetails,
  props: {
    name: 'lucky',
    id: 7
  }
}

BookDetails组件

<template>
  <div class="book-details">
    {{name + id}}
  </div>
</template>

<script>
export default {
  props: ['name', 'id'],
  data () {
    return {
    }
  }
}
</script>

3. 函数模式

路由

{
  path: '/BookDetails',
  name: 'BookDetails',
  component: BookDetails,
  props: (route) => ({ book_id: route.query.book_id })
}

父组件

<template>
  <div class="book">
    <button @click="goRouter">函数模式</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods:{
    goRouter(){
      this.$router.push({path: 'BookDetails', query: {book_id: 999}})
    },
  }
}
</script>

九. HTML5 History 模式

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

路由

export default new Router({
  mode: 'history',
  routes: [...]
})

来看一下用之前和用之后的地址(～￣▽￣)～

// hash
http://localhost:8080/#/
http://localhost:8080/#/BookDetails/1

// history
http://localhost:8080/
http://localhost:8080/BookDetails/1

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/BookDetails/id 就会返回 404，这就不好看了

posted on 2024-08-27 20:12 梁飞宇阅读(464) 评论(0) 收藏举报

刷新页面返回顶部

梁飞宇