vue-router 路由相关知识详解

最新推荐文章于 2023-05-22 00:35:18 发布

郭大钰

最新推荐文章于 2023-05-22 00:35:18 发布

阅读量341

点赞数

分类专栏： vue 文章标签： vue.js html5 web

本文链接：https://blog.csdn.net/m0_46684624/article/details/107874093

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue-router详解

1.认识路由
2. Vue-router基本使用
3. Vue-router嵌套路由
4. Vue-router参数传递
5. Vue-router导航守卫
6. keep-alive

一，认识路由

1.1相关概念
定义：路由就是通过互联的网络吧信息从源地址传输到目的地址的活动。

路由器提供了两种机智：路由和转送。

路由是决定数据包从来源到目的地的路径。
转送将输入端的数据转移到合适和输出端。

路由中有一个非常重要的概念:路由表
路由表本质上就是一个映射表，决定了数据包的指向。

1.2后端路由阶段
早期网站开发整个HTML页面是有服务器来渲染的。服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示.

问：一个网站，多个页面，服务器如何处理？
答：1.每个页面有自己对应的网址，URL。
2.URL会发送到服务器，服务器通过正则对URL进行匹配，最后交给一个Controller进行处理。
3.Controller进行各种处理，最终生成HTML或数据，返回给前端。
4.即完成一个IO操作。

缺点：
1.整个页面模块由后端人员来编写和维护。
2.前端人员开发页面，需要通过PHP/JAVA等编写。
3.HTML代码和数据混在一起，编写和维护不便。

1.3前端路由阶段

前后端分离阶段

随着Ajax的出现，有了前后端分离的开发模式。
后端只提供API来返回数据，前端通过Ajax来获取数据，并且通过JavaScript将数据渲染到页面中。
（前后端责任清晰，后端专注数据，前端专注交互和可视化）
当移动端（ios/android）出现后，后端不需要进行任何处理，依然使用之前的一套API即可。

单页面富应用（SPA）阶段：
在前后端分离的基础上加了一层前端路由。

前端路由的核心：
改变URL,但是页面不进行整体的刷新。

URL的hash：

URL的hash也就是锚点(#), 本质上是改变window.location的href属性，但是页面不发生刷新。

1.4HTML的history模式
history接口是HTML5新增的，有物种模式改变URL且不刷新页面。

history.pushState()
history.replaceState()
history.go()

三大框架路由实现
Angular的ngRouter
React的ReactRouter
Vue的vue-router

认识Vue-router
vue-router是vue.js官方的路由插件，它和vue.js是深度集成的，是和用于构架单页面应用。

vue-router是基于路由和组件的

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

二，Vue-router基本使用

2.1安装路由

安装vue-router

npm install vue-router --save

在模块化工程中使用路由（因为是一个插件，所以可通过Vue.use()来安装路由功能）
第一步：导入路由对象，并且调用Vue.use(VueRouter）
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例

//在index.js中
//1.导入路由对象
import Vue from 'vue'
import VueRouter from 'vue-router'
//2.调用vue.use（VueRouter） 注入插件
Vue.use(VueRouter)
//3.定义路由
const routes = []
//4.创建router实例
const router = new VueRouter({
  routes
})
//5.导出路由实例
export default router

//在main.js
import router from './router'
//挂载到vue实例中
new Vue({
  el:'#app',
  router,
  render:h=>h(App)
})

使用vue-router的步骤

创建路由组件
配置路由映射：组件和路径映射关系
使用路由：通过< router-link >和< router-view >

1.创建路由组件
在这里插入图片描述

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

<template>
  <div id="app">
    <h1>我是网站的标题</h1>
    <router-link to="/home">首页</router-link>
    <router-link to="/profile">个人</router-link>
    <router-view></router-view>
    <h2>我是版权信息</h2>
  </div>
</template>
<script>
  export default {
    name: 'App',
    components:{
    }
  }
</script>

路由的默认路径
默认情况下，进入网站首页，我们希望< router-view >渲染内容。显示中，需要用户点击。

让路径默认跳到首页,只需多配置一个映射即可。

//在routes中又配置了一个映射
//path配置的是根路径：/
//redirect是重定向，将根路径重定向到/home的路径下
const routes = [
  {
    path:'/',
    redirect:'/home'
  }
]

HTML5的history模式
改变路径的方式有两种：

URL的hash （默认）
html5的history

如果想用html5的histor

//4.创建router实例
const router = new VueRouter({
  routes,
  mode:'history'
})

< router-link >补充
在前面的学习中，我们仅仅使用了一个属性：to，用于指定跳转的路径。
其他属性

<router-link to='/home' tag='li'>

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

在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类.

<a href="/home" class="router-link-exact-active router-link-active">首页</a>

嵌套路由

/back/news
/back/message
第一步，创建组件 BackNews和BackMessage
第二步，匹配映像关系

const Back = () =>import('views/Back')
const BackNews = () =>import('views/BackNews')
const BackMessage = () =>import('views/BackMessage')

 {
    path:'/back',
    component:Back,
    children:[
      {
        path:'news',
        component:BackNews
      },
      {
        path: 'message',
        component:BackMessage
      }
    ]
  },

第三步：展示

 <div>
  <router-link to="/back/news">新闻</router-link>
    <router-link to="/back/message">消息</router-link>
  <router-view></router-view>
  </div>

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

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

query的类型

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

URL:协议：//主机：端口/路径？查询

//home.vue
 <router-link :to="{path:'/detail',query:{name:'kendra'}}">细节</router-link>
 //detail
  我是用户
  <h2>{{$route.query}}</h2>

按钮跳转
不带参数
home.vue

 <button @click="detailClick()">细节</button>
 
 methods:{
      //不传数据
      detailClick(){
        this.$router.push('/detail/'+this.userId)
      }
    }

带参数传递
home.vue

<button @click="detailClick()">细节</button>

 methods:{
      //传数据
      detailClick(){
        this.$router.push({
          path:'/detail',
          query:{
            name:'dayu',
            age:22
          }
        })
      }
    }

//detail也可拿到数据
<div>
  我是用户
  <h2>{{$route.query}}</h2>
</div>

效果
在这里插入图片描述

郭大钰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue-router 路由相关知识详解

Vue-router详解1.认识路由2. Vue-router基本使用3. Vue-router嵌套路由4. Vue-router参数传递5. Vue-router导航守卫6. keep-alive一，认识路由1.1相关概念定义：路由就是通过互联的网络吧信息从源地址传输到目的地址的活动。路由器提供了两种机智：路由和转送。路由是决定数据包从来源到目的地的路径。转送将输入端的数据转移到合适和输出端。路由中有一个非常重要的概念:路由表路由表本质上就是一个映射表，决定了数据包的
复制链接

扫一扫