vue笔记-VueRouter篇-路由的概念

时间:2021-08-01
本文章向大家介绍vue笔记-VueRouter篇-路由的概念,主要包括vue笔记-VueRouter篇-路由的概念使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1.前端路由和后端路由的区别

首先要搞懂路由的概念,所谓的路由指的是根据不同的url执行相应的操作,比如点击百度新闻时,当点击国内按钮,则对应的地址为http://news.baidu.com/guonei,点击国际按钮时,对应的地址为http://news.baidu.com/guoji,它只是将guonei改为了guoji,当后台接收到该url时,会进行判断,如果最后边的字符串为guonei,则将此请求发送给处理国内逻辑的代码,如果为guoji,则将请求发给处理国际逻辑的代码,而负责转发请求的操作就是路由负责的事情
后端路由是对传递的url进行转发和响应,它是由后端程序控制
因为vue是但组件页面,所以在最后生成的文件中只有一个页面,那么如何动态的显示不同的组件,这就需要前端路由完成了,和url类似,它也是根据传递的字符串进行动态切换当前页面
vue-router就是用来处理vue中路由跳转等功能的一个插件,对应的网址为https://router.vuejs.org/zh/

2.hello world

先通过vuecli创建一个新项目,在创建时可以选择默认安装vue-router的方式,当项目创建好之后,对应的配置也完成了,在项目中就可以直接使用路由功能了
为了搞清楚它在创建项目时具体配置了哪些东西,本次不使用默认的方式安装,而是通过手动的方式一步步配置
使用vuecli创建一个不带vue-router功能的项目
在使用路由功能前需要先对其进行安装

npm install vue-router


当出现此提示时表名路由已经安装成功
项目创建好之后需要在main.js中配置插件

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

createApp(App).use(router).mount('#app')

其中router是通过router目录下的index.js文件导出的一个vuerouter对象

将其单独放在一个目录下便于后期的管理
在index.js中首先导入vuerouter对象中的createRouter方法

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

接着配置跳转url和对应组件的信息

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

这是一个数组,其中每个下标中存放着url和组件对应的信息,第一个是通过引用已加载的组件,第二个则是只有当此路径使用时才会加载对应的组件,称之为懒加载

const router = createRouter({
	history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

最后将配置项数组传给createRouter方法,它会根据配置项返回创建好的router,接着将此对象导出,这样在main.js中就可以直接使用了
添加了路由功能后,如果想使用则需要指定路由页面渲染的地方,此配置是在App.vue中配置的

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view>
  </router-view></div>
</template>

vue-router会根据配置的路由信息,将对应的组件内容放在标签处,router-link配置的就是路由中的信息,根据to指定的路径动态切换显示的组件
启动项目后访问根路径,根据配置可知默认会显示Home组件

点击About后页面会切换为About组件中的内容

可以看到当点击链接后页面并没有整体刷新,变化的只有url后的路径和页面特定部分的内容,此效果就是vue-router提供的路由功能

3.前端路由监听url改变的两种方式

对于url变化后切换页面目前有两种模式,第一种为history模式,另一种为hash模式
前端路由的本质是当url发生改变时不刷新页面,这两种模式都可以实现此效果,区别在于hash模式在url中会带一个#,而history并不会
它们都是基于浏览器自带的功能实现的,一般开发中使用最多的就是history模式了,它对应底层的history.pusState方法

4.动态路由、嵌套路由与参数传递

除了则页面上使用之外,当vuerouter被注册到vue实例中后,vue提供了$router和$route对路由进行操作

动态路由

首先将home的链接进行修改

<router-link to="/home">Home</router-link> |

在router的index.js中进行配置

const routes = [
  {
    path: '/:aa',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

此处的path中对应的就是动态路由,当页面上访问/about或者/home时都会跳转到About组件界面,而它们后面的路径则会存放在aa变量中,变为了路由的参数,此参数值通过this.$route即可获取

嵌套路由

普通路由是将整个页面的内容替换掉,而嵌套路由是替换指定的部分,比如点击tab页切换内容,被切换的部分就是嵌套路由实现的
在About组件中添加嵌套路由需要显示的位置

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1>嵌套路由</h1>
    <router-view>
  </router-view></div>
</template>

重新创建两个组件

在需要展示嵌套路由的中组件下使用children配置路由

const routes = [
  {
    path: '/:aa',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    children: [
      {
        path: 'c1',
        name: 'AboutC1',
        component: () => import(/* webpackChunkName: "about" */ '../views/AboutC1.vue'),
      },
      {
        path: '/c2',
        name: 'AboutC2',
        component: () => import(/* webpackChunkName: "about" */ '../views/AboutC2.vue'),
      },
    ]
  }
]

嵌套路由有两种访问方式,如果在path中添加/,那么就使用绝对路径访问,否则需要添加父路由路径

5.全局、组件、路由内导航守卫

导航守卫就是类似于现实中的一个哨兵,用于实现路由发生变化需要时需要做的功能,在vue-router中通过beforeEach函数实现,根据作用域不同可分为全局、组件内、路由内三种类型
创建好router对象后,调用导航守卫方法

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  console.log('导航守卫。。。', to)
  next()
})

当页面上的路由变化时就可以被导航守卫监听到

如果不想让此次路由跳转生效,只需要将next方法移除

6.keep-alive

keep-alive是vue的内置组件,主要的作用就是将不活动的页面缓存起来而不是销毁,在一定程度上可以提升性能
使用方式很简单,只需要用此组件将router-view包裹起来

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1>嵌套路由</h1>
    <keep-alive>
      <router-view>
    </router-view></keep-alive>
  </div>
</template>

在页面激活时会调用activated方法,页面被缓存时调用deactivated方法,用法和生命周期方法相同

原文地址:https://www.cnblogs.com/luffysk/p/15087126.html