Vue-router

最新推荐文章于 2023-03-31 11:32:23 发布
最新推荐文章于 2023-03-31 11:32:23 发布
阅读量310 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44768794/article/details/115485135
版权

Vue-router

认识路由

路由就是通过互联的网络将信息从源地址传输到目的地址的活动
生活中的路由器分为两种机制：路由和转送
路由是决定数据包从来源到目的地的路径
转送是将输入端的数据转移到合适的输入端

1.1 前后端渲染和前后端路由（面试）

后端路由

在这里插入图片描述
1.后端渲染：
jsp: java server page
2.后端路由
后端处理URL和页面之间的映射关系

前后端分离

后端只负责提供数据，不负责任何阶段的内容
jQuery也是前后端分离模式
在这里插入图片描述

SPA(单页面复应用阶段)—前端路由

SPA：单页复应用
整个页面只有一个html页面

单页面复应用阶段：改变URL，但是页面不进行整体的刷新

全部资源会放在浏览器上，下面是前端路由的功能
前端路由： 点击不同按钮会生成相应的URL，在全部资源中找到组件相关东西进行渲染，不会向服务器请求资源

浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页
在这里插入图片描述

1.2 url的hash和HTML5的history

向服务器发送请求，但页面不进行整体的刷新，有两种方法

URL的hash

url的hash即锚点(#)，本质上是改变window.location的href属性
我们可以通过对location.hash来改变href，但是页面不进行刷新

console输入：
在这里插入图片描述
页面跳转但是整个页面不进行刷新
在这里插入图片描述
表明没有重新提交请求
在这里插入图片描述

HTML5的history

1.pushState

pushState 结构相当于栈，先进后出，后进先出
back 进行返回
在这里插入图片描述
在这里插入图片描述

2.replaceState

replaceState 直接进行替换，不能返回
在这里插入图片描述

3.go

history.back() 等价于 history.go(-1)
history.forward() 等价于 history.go(1)
history.go(num) num为前进后退步数
相当于浏览器的前进与后退

vue-router基本使用

2.1 认识vue-router

目前前端流行的三大框架，都有自己的路由实现
□ Angular的ngRouter
□ React的ReactRouter
□ Vue的vue-router

vue-router适于构建单页面应用

vue-router是基于路由和组件的
路由用于设定访问路径，将路径和组件映射起来
在vue-router的单页面应用中，页面的路径的改变就是组建的切换

2.2 配置路由相关信息

如以下代码

// 配置路由相关信息
// 导入路由
import VueRouter from 'vue-router'
import Vue from 'vue'

// 1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter)

// 2.创建路由对象
const routes = [
    
]
const router = new VueRouter({
  // 配置路径和组件之间的映射关系
  routes
})

// 3.将router对象传入到Vue实例中
export default router

2.3 使用vue-router的步骤

第一步：创建路由组件
在如下位置新建vue组件
在这里插入图片描述

第二步：配置路由映射：组件和路径映射关系
第三步：使用路由：通过router-link和router-view

router-link和router-view

App.vue中添加：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link to='/HelloWorld'>hello</router-link>
    <router-link to='/about'>关于</router-link>
    <router-view></router-view>
  </div>
</template>

router-link：链接跳转
该标签是一个vue-router中内置的组件，他会被渲染成a标签
router-view：显示映射的组件
1.该标签会根据当前的路径，动态渲染出不同的组件
2.网页的其他内容，比如顶部的标题/导航，或者底部的一些版权信息等和router-view处于同一等级
3.在路由切换时，切换的是router-view挂载的组件，其他内容不会发生改变
在这里插入图片描述

2.4 路由的默认值

{
      path: '/',
      component: About
    },
    {
      path: '/',
      // redirect为重定向
      redirect: '/about'
    },

默认显示
在这里插入图片描述

2.5 修改为history模式

直接在index.js中添加

 mode: 'history'

没有#
在这里插入图片描述

2.6 router-link的其他属性补充

tag tag可以指定router-link之后渲染成什么组件，比如上面的代码会被渲染成一个button元素
replace replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中
active-class 当router-link 对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。
App.vue

<div id="app">
    <img src="./assets/logo.png">
    <router-link to='/HelloWorld' tag='button' replace active-class='active'>hello</router-link>
    <router-link to='/about' tag='button' replace active-class='active'>关于</router-link>
    <router-view></router-view>
  </div>

index.js

  linkActiveClass: 'active'

2.7 通过代码跳转路由

methods: {
    homeClick() {
      // 通过代码的方式修改路由 vue-rouder
      this.$router.push('/HelloWorld')
      console.log('home');
    },
    aboutClick() {
      this.$router.push('/about')
      console.log('about');
    }
  }

2.8 vue-router动态路由的使用

动态获取用户id
在这里插入图片描述
在这里插入图片描述

第一步： App.vue

data() {
    return {
      $router: '',
      userId: 'zzy'
    }
  },

 <router-link :to="'/about/'+userId" tag='button' replace active-class='active'>关于</router-link>

第二步：index.js

{
      path: '/about/:userId',
      name: 'about',
      component: About
    }

第三步：about.vue

<p>{{userId}}</p>

computed: {
      userId() {
        // 此处的route为当前活跃的路由
        return this.$route.params.userId
      }
    }

2.9 vue-router打包文件的解析

在这里插入图片描述
第一个js文件：当前应用程序开发的所有代码(业务代码)
第二个js文件：为了打包的代码做底层支撑
第三个js文件：vender(提供商) 第三方

2.10 vue-router路由懒加载的使用

路由懒加载的主要作用是将路由对应的组件打包成一个个单独的js
只有当这个路由被访问到时，才加载对应的组件
懒加载的方式
方式一：结合Vue的异步组件和webpack的代码

const about = resolve => {require.ensure(['../components/about.vue'],() => {
resolve(require('../components/about.vue'))})};

方式二：AMD写法

const about = resolve => require(['../components/about.vue'],resolve);

方式三：ES6写法

const about = () => import('../components/about')

2.11 $route和 $router的区别

$router为VueRouter实例，想要导航到不同URL，则使用 $router.push方法
$route为当前router跳转对象里面可以获取name、path、query、params等

vue-router嵌套使用

嵌套路由：比如在about页面，可以通过/about/news 和 /about/message 来访问内容

实现嵌套路由的步骤：
第一步：创建对应的子组件，并且在路由映射中配置对应的子路由
第二步：在组件内部使用router-view标签

index.js

const aboutMessage = () => import('../components/aboutMessage')
const aboutNews = () => import('../components/aboutNews')

children: [
        {
          path: '',
          redirect: 'news'
        },
        {
          path: 'message',
          component: aboutMessage
        },
        {
          path: 'news',
          component:aboutNews
        }
      ]

about.vue

<div>
    <h3>哈哈哈，我是关于</h3>
    <h2>大家好呀</h2>
    <p>{{userId}}</p>
    <router-link to="/about/message">消息</router-link>
    <router-link to="/about/news">新闻</router-link>
    <router-view></router-view>
  </div>

aboutMessage.vue

<template>
  <div>
    <ul>
      <li>消息1</li>
      <li>消息2</li>
      <li>消息3</li>
      <li>消息4</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'aboutMessage'
}
</script>>

aboutNews.vue

<template>
  <div>
    <ul>
      <li>新闻1</li>
      <li>新闻2</li>
      <li>新闻3</li>
      <li>新闻4</li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'aboutNews'
  }
</script>

在这里插入图片描述

vue-router参数传递

4.1 params 类型

传递参数的方式：
传递参数主要有两种类型：params和query

params的类型：
配置路由格式：/router/:id
传递的方式：在path后面跟上对应的值
传递后形成的路径：/router/123,/router/abc

4.2 query的类型

query的类型
配置路由格式：/router，也就是普通配置
传递的方式：对象中使用query的key作为传递方式
传递后形成的路径：/router?id=123,/router?id=abc
profile.vue

<template>
  <div>
    <ul>
      <li>档案1</li>
      <li>档案2</li>
    </ul>
    <p>{{$route.query.name}}</p>
    <p>{{$route.query.age}}</p>
    <p>{{$route.query.id}}</p>
  </div>
</template>
<script>
export default {
  name: 'profile'
}
</script>

App.vue

 <router-link :to="{path: '/profile',query: {name: 'zzy', age: 11, id: 'zzyId'}}">档案</router-link>

index.js

const profile = () => import('../components/profile')

{
      path: '/profile',
      component: profile
    }

传递参数
在这里插入图片描述
在这里插入图片描述

vue-router导航守卫

即动态修改导航的标题
之前写法
直接在调用组件上加上title属性
about.vue

// 创建组件就回调
    created() {
      console.log('created');
      document.title = '关于'
    },
    // 挂载到DOM上时回调
    mouted() {
      console.log('mouted');
    },
    // 页面刷新时回调
    updated() {
      console.log('updated');
    }

5.1 导航守卫的使用

前置钩子：
index.js

router.beforeEach = ((to,form,next) => {
  document.title = to.matched[0].meta.title
  next()
})

每个routes加上meta属性呢

导航钩子的三个参数：
to：即将要进入目标的路由对象
from：当前导航即将要离开的路由对象
next：调用该方法后，才能进入下一个钩子

后置钩子，afterEach，不需要主动调用next()函数

// 后置钩子(hook)
router.afterEach((to, from) => {
  console.log('-----');
})

5.2 全局守卫

前置导航和后置钩子都是全局守卫
还有：
路由独享的守卫
组件内的守卫

keep-alive

keep-alive是

cb++
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue里面怎么使用站点地图Sitemap做SEO
祈澈菇凉
10-23 875
4：生成站点地图：在Vue应用程序中的某个适当位置，可以编写一个脚本来生成站点地图。3：安装vue-router-sitemap：vue-router-sitemap是一个用于生成站点地图的Vue路由插件。1：安装vue-router：首先确保Vue应用程序正在使用vue-router来进行路由管理。6：提交站点地图给搜索引擎：最后一步是将站点地图提交给搜索引擎，以便它们可以索引网站的所有页面。在Vue中使用站点地图（Sitemap）来进行SEO优化的方法与在其他前端框架中类似。
vue-router.js
05-14
这是Vue框架的已经js库，现在在网上比较难找到，在这里分享给大家使用。
vue路由插件之vue-route
10-16
主要介绍了vue路由插件之vue-route的相关知识，本文通过实例代码给大家介绍了vue router的使用，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue-router-sitemap-通过vue-router配置生成sitemap.xml-Vue.js开发
05-27
vue-router-sitemap通过vue-router配置安装npm i --save vue-router-sitemap示例用法// router.js import VueRout vue-router-sitemap通过vue-router配置生成sitemap.xml安装npm我-保存vue-router-sitemap示例用法// router.js从'vue-router'导入VueRouter; 导出const路由器：VueRouter =新的VueRouter（{路由：[{路径：'/'，名称：'index'，组件：Index，}，]，}，）; // sitemapMiddleware.js从“ vue-router-sitemap”导入VueRouterSitemap； 从“路径”导入路径； 导入{路由器}
vue项目SEO优化以及生成sitemap.xml
qq_38366946的博客
05-14 4976
众所周知vue项目本质是单页面项目，对SEO优化十分不好，找起资料来更是麻烦。闲话不多说，分享一下我对自己项目进行的SEO方案及生成sitemap.xml。 需要的库 npm install sitemap-webpack-plugin --save-dev npm install prerender-spa-plugin -D 前者是用来生成sitemap的，后者是SEO方案 vue.config.js const PreRenderSPAPlugin = require('prerender-s
Vue-初步了解vue-router的三要素：路由map 、路由视图、路由导航
weixin_30785593的博客
03-07 247
安装vue-router模块 　　使用vue-router前要先安装vue-router库 cnpm install vue-router –save 使用vue-router 　　vue-router有三个要素：路由map 路由视图 路由导航。路由map指路由与组件的映射关系；路由视图指路由映射对应组件的渲染位置；路由导航指可以使地址栏发生变化的导航链接。一、路由ma...
VUE 项目如何生成sitemap
fengshengwei3的专栏
08-17 2326
Simple Sitemap For Vue Router (zigamiklic.com) 1. 准备代码 在router.js 中 添加如下代码 function getRoutesList(routes, pre) { return routes.reduce((array, route) => { const path = `${pre}${route.path}`; if (route.path !== '*') { array.push(path
vuepress-plugin-sitemap:vuepress的Sitemaps生成器插件
05-05
vuepress-plugin-sitemap vuepress的Sitemaps生成器插件。 安装 纱 yarn add vuepress-plugin-sitemap NPM npm install vuepress-plugin-sitemap 在v2.0.0中，除了sitemap之外的其他依赖项都已移至peerDependencies，因此，当我们将此插件与cli方法一起使用时，我们需要手动安装esm模块（ vuepress已经安装了chalk和commander程序）。 用法 Vuepress v1.x // .vuepress/config.js module . exports = { plugins : { 'sitemap' : { hostname : 'https://pake.web.id' } , } } Vuepre
浅谈vue-router
wgh2820777641的博客
03-28 322
浅谈vue-router 现在的大部分应用都流行SPA应用（single page application）。 SPA与传统的MPA的最大的不同的就是SPA使用的是单页面结构而传统的MAP使用的就是多页面结构。 MPA需要切换内容的时候往往会进行单个的页面的html的文件的跳转，这个时候受网络，性能的影响，浏览器会出现不定时间的空白界面，用户体验不好。 单页面应用就是用户通过某些操作更改地址栏ur...
vue-router 实现导航守卫（路由卫士）的实例代码
10-18
主要介绍了vue-router 实现导航守卫（路由卫士）的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue学习之Vue-Router用法实例分析
11-28
本文实例讲述了vue学习之Vue-Router用法。分享给大家供大家参考，具体如下： Vue-router就像一个路由器，将组件(components)映射到路由(routes)后，通过点击<router>它可以在<router>中将相应的组件渲染出来。 1、使用vue-router的步骤 //1、创建路由组件 const Link1={template:'#link1'}; const Link2={template:'#link2'}; const Link3={template:'#link3'}; //2、定义路由映射 const rout
Vue-router的使用和出现空白页,路由对象属性详解
10-18
今天小编就为大家分享一篇Vue-router的使用和出现空白页,路由对象属性详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router-next：Vue 3官方路由器
02-06
vue-router-next 这是Vue路由器4的存储库（适用于Vue 3）支持Vue路由器Vue Router是Vue生态系统的一部分，是MIT许可的开放源代码项目，其持续的开发完全依靠赞助者的支持而得以实现。 如果您想成为赞助商，请考虑：...
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
HTML5的popstate、pushState、replaceState记录(Vue-Router实现)
陈坚泓的博客
10-11 1486
HTML5的popstate、pushState、replaceState记录popstate示例hashchangehistory.pushState()语法参数描述示例history.replaceState()语法参数例子推荐阅读Vue源码学习目录Vue Router源码（四）路径切换 你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特 《人生果实》经典语录 Vue-Router源码里路由切换跳转的实现原理是通过调用浏览器原生的 history 的 pushState 接口或者 repla
解析vue-router到html5的pushState replaceState是如何实现页面不刷新而时时刷新数据的
qq_24418107的博客
03-31 688
该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。先说一下history的作用是保存当前窗口访问过的所有url的地址，可以通过history.back history.go(-1) 来访问历史记录的URL. history.forward() 来跳转到下一个URL。History.replaceState()方法用来修改 History 对象的当前记录，其他都与pushState()方法一样，替换当前浏览器的地址，页面不刷新。
vue-router一些使用教程
weixin_34304013的博客
06-07 61
关于vue-router那些事juejin.im/post/5b0281…
vue-router
最新发布
08-27
import VueRouter from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值