Vue学习（二十一）路由

已于 2022-07-03 21:53:44 修改
阅读量176 收藏
点赞数
分类专栏： Vue.js 文章标签： vue.js 学习 javascript
于 2022-07-02 16:03:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29107721/article/details/125574119
版权

文章目录

Vue-路由（route）

vue-router 理解

Vue中的一个插件库，专门用来实现SPA（single page web application）应用

SPA应用

  1. 单页面应用（single page web application，SPA）。
  2. 整个应用只有一个完整的页面。
  3. 页面不出现跳转和整体刷新，只是局部刷新。
  4. 数据需要通过ajax请求获取

路由

定义

  1. 一个路由就是一组映射关系（key-value）。
  2. key为路径，value可能是function或component。

分类

  1. 后端路由
    1. 定义：value是function，用于处理客户端提交的请求。
    2. 工作过程：服务器收到一个请求是，根据请求路径找到匹配的函数来处理请求，返回响应数据。
  2. 前端路由
    1. 定义：value是component，用于页面内容渲染。
    2. 工作过程：当浏览器的路径发生改变时，对应的组件会被渲染。

基本使用

  1. 安装vue-router
npm i vue-router@3 # 安装3版本，适用于vue2
npm i vue-router # 安装最新版本
# 或
yarn add vue-router@3
  1. 引入和应用
// 引入VueRouter
import VueRouter from 'vue-router'
...
// 使用VueRouter
Vue.use(VueRouter)
  1. 编写router配置项
// 该文件用于创建整个应用的路由器
import VueRouter from 'vue-router'

// 引入组件
import About from '../components/About'
import Home from '../components/Home'

// 创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: "/about",
            component: About
        },
        {
            path: "/home",
            component: Home
        },
    ]
})
  1. 实现切换router-link（active-class可配置高亮样式）
<router-link to="/about" class="list-group-item" active-class="active">About</router-link>
  1. 指定展示位置router-view
<router-view></router-view>

注意：

  1. 路由组件通常放在pages文件夹，一般组件通常放在components文件夹。
  2. 通过切换，隐藏了的路由组件，默认是被销毁的，需要时再去挂载。
  3. 每个路由组件都有自己的$route属性，存储着自己的路由信息。
  4. 整个应用只有一个router，可以通过组件的$router属性获取到。

main.js

// 引入Vue
import Vue from "vue";
// 引入App组件
import App from "./App"
// 引入Vue Router
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'

// 关闭生产提示
Vue.config.productionTip = false
Vue.use(VueRouter)

// 创建vm
new Vue({
    render: h => h(App),
    router: router,
}).$mount("#app");

App.vue

<template>
	<div>
		<div class="row">
			<div class="col-xs-offset-2 col-xs-8">
				<div class="page-header"><h2>Vue路由案例（Vue Router Demo）</h2></div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-2 col-xs-offset-2">
				<div class="list-group">
					<!-- 原多页面方式跳转方式 -->
					<!-- <a href="./about.html" class="list-group-item active">About</a>
					<a href="./home.html" class="list-group-item">Home</a> -->
					
					<!-- Vue中借助router-link标签实现路由的切换 -->
					<router-link to="/about" class="list-group-item" active-class="active">About</router-link>
					<router-link to="/home" class="list-group-item" active-class="active">Home</router-link>

				</div>
			</div>
			<div class="col-xs-6">
				<div class="panel">
					<div class="panel-body">
						<!-- 此处展示组件靠用户点击的导航决定 -->
						<!-- 指定组件的呈现位置 -->
						<router-view></router-view>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'App',
	}
</script>

router/index.js

// 该文件用于创建整个应用的路由器
import VueRouter from 'vue-router'

// 引入组件
import About from '../components/About'
import Home from '../components/Home'

// 创建并暴露一个路由器
export default new VueRouter({
    routes: [
        {
            path: "/about",
            component: About
        },
        {
            path: "/home",
            component: Home
        },
    ]
})

About.vue

<template>
  <h2>我是About的内容</h2>
</template>

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

Home.vue

<template>
  <h2>我是Home的内容</h2>
</template>

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

路由嵌套

  1. 配置路由规则，使用children配置项
routes: [
    {
        path: "/about",
        component: About
    },
    {
        path: "/home",
        component: Home,
        children:[
            {
                path: 'news',
                component: News,
            },
            {
                path: 'message',
                component: Message
            }
        ]
    },
]
  1. 跳转需要写完整路径，依旧使用router-link标签，显示使用<router-view></router-view>标签
<router-link to="/home/message" class="list-group-item" active-class="active">Message</router-link>

路由传参

query参数

  1. 传递参数

    • 字符串写法：
    <router-link :to="`path?key1=value1&key2=value2....`">{{message.title}}</router-link>
  • 对象写法：
   <router-link :to="{
       path:'path',
           query: {
               key1: value1,
               key2: value2
           }
       }">
       {{m.title}}
   </router-link>
  1. 接收参数
$route.query.key

命名路由

  1. 作用：简化路由跳转

  2. 使用：

    • **命名：**在路由配置中添加name配置项
    routes: [
    {
        name: 'about',
        path: "/about",
        component: About
    },
    {
        name: 'home',
        path: "/home",
        component: Home,
        children:[
            {
                path: 'news',
                component: News,
            },
            {
                path: 'message',
                component: Message,
                children: [
                    {
                        name: 'messageDetail',
                        path: 'detail',
                        component: Detail,
                    }
                ]
            }
        ]
    },
]
  • **使用：**需要使用对象方式配置路径，将path替换成name:配置名
<router-link :to="{
    name:'messageDetail',
        query: {
            id: m.id,
            title: m.title
    }
}">
    {{m.title}}
</router-link>

params参数

  1. 配置路由，声明接收params参数
routes: [
    {
        name: 'about',
        path: "/about",
        component: About
    },
    {
        name: 'home',
        path: "/home",
        component: Home,
        children:[
            {
                path: 'news',
                component: News,
            },
            {
                path: 'message',
                component: Message,
                children: [
                    {
                        name: 'messageDetail',
                        path: 'detail/:id/:title',
                        component: Detail,
                    }
                ]
            }
        ]
    },
]

  1. 传递参数

    • 字符串写法：
    <router-link :to="`/home/message/detail/value1/value2`">...</router-link>
  • 对象写法：
   <router-link :to="{
       name:'messageDetail',
           params: {
               key1: value1,
               key2: value2,
                   ...
           }
   }">
   {{m.title}}
   </router-link>
  1. 接收参数：
$route.params.key

注意：路由携带params参数时，如果使用对象写法，不能使用path配置项，必须使用name

路由的props

作用：让路由组件更方便的接收到参数

  1. **对象写法：**对象写法，该对象中的所有key-value都会以props形式传递给Detail组件
{
    name: 'messageDetail',
        path: 'detail',
            component: Detail,
                // 对象写法，该对象中的所有key-value都会以props形式传递给Detail组件
                props: {
                    key1: value1,
                    key2: value2 
                },
}
  1. **boolean写法：**如果值为真，就会把该路由组件收到的params参数，以props形式传递给对应组件
{
    name: 'messageDetail',
        path: 'detail',
            component: Detail,
                // boolean值写法，如果值为真，就会把该路由组件收到的params参数，以props形式传递给对应组件
                props: true,
}
  1. **函数写法：**返回对象中的每一组key-value都会通过props传给对应组件
{
    name: 'messageDetail',
        path: 'detail',
            component: Detail,
                // 函数写法，返回对象中的每一组key-value都会通过props传给对应组件
                /* props($route) {
                                return { id: $route.query.id, title: $route.query.title }
                            }, */
                /* props({query}) {
                                return { id: query.id, title: query.title }
                            }, */
                props({query:{id, title}}) {
                return { id: id, title: title }
            },
}
  1. 接收：props:["key1", "key2"]

router-link的replace属性

  • **作用：**控制路由跳转时操作浏览器历史记录
  • 浏览器的历史记录有两种写法（默认为push）:
    • push：追加历史记录（压栈）
    • replace：替换当前记录
  • 开启方式replace模式：<router-link replace ... >...</router-link>

编程式路由导航

作用： 不借助<router-link>实现路由跳转

  • $router.back()：后退
  • $router.forward()：前进
  • $router.go(3)：前进/后退指定步数（整数为前进，负数为后退）
  • $router.push：push方式跳转路由（有痕）
  • $router.replace：replace方式跳转路由（无痕）
methods: {
    back() {
        this.$router.back();
    },
    forward() {
		this.$router.forward();
    },
	testGo() {
		this.$router.go(3);
	}
    pushShow(m) {
        this.$router.push({
            name:'messageDetail',
            query: {
                id: m.id,
                title: m.title
            }
        });
    },
        repalceShow(m) {
            this.$router.replace({
                name:'messageDetail',
                query: {
                    id: m.id,
                    title: m.title
                }
            });
        },
},

缓存路由组件

  1. 作用： 让不展示的路由组件保持挂载，不被销毁

  2. 使用： 使用<keep-alive></keep-alive>标签包裹<router-view></router-view>

    1. <keep-alive></keep-alive>，所有被包裹的<router-view></router-view>中展示的组件被缓存
    2. <keep-alive :include="['组件名',...]"></keep-alive>指定的组件被缓存
    <keep-alive include="News">
    <router-view></router-view>
</keep-alive>
飞不起来的小菜鸟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习之路由转发
天秤-white的博客
03-03 1709
Vue学习之路由转发 1、路由（routing）是通过网络把信息从源地址传输到目标地址的路径叫路由。 2、路由器就提供了两种机制：路由和转发。路由是决定数据包从源地址到目标位地的路径。转送将输入端的数据转发到输出端。 3、路由中有一个重要的概念叫做路由表。路由表本质上就是一张后端映射表，决定了url的指向路径。一般是由后端就行封装。 随着网页开发目前基本是前后端分离时代。由于Ajax(异步 JavaScript 和 XML)的出现，就有了前后端分离的开发模式。后端只需要提供接口来返回数据，前端就通过.
vue3 路由的使用
m0_49515138的博客
02-03 2万+
name 是路由的名称，非必填，但是一般都会配置上去，这样可以很方便的通过 name 来代替 path 实现路由的跳转，因为像有时候的开发环境和生产环境的路径不一致，或者说路径变更，通过 name 无需调整，但如果通过 path，可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上，推出了 异步组件，可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样按需载入，很方便的实现路由组件的懒加载。
Vue学习：路由
H215919719的博客
11-07 4071
要到哪里去(to)？然后保安再告诉你下一步该怎么做(next())？​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pcekBNZI-1667816366270)(assets/image-20221030104335967.png)]​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P7kW7Bbk-1667816366216)(assets/image-20221029102040346.png)]
vue学习——路由vueRoute
qq_46153157的博客
05-25 704
浅浅学习一下路由吧
vue3学习——路由进度条
m0_49494051的博客
02-11 680
【代码】vue3学习——路由进度条。
vue学习之路由组件配置
Low__Profile的博客
10-28 589
vue学习之路由组件配置
Vue学习之VueRouter的路由钩子使用
five-five
03-16 2397
VueRouter提供了一些路由钩子函数，允许开发者在不同的路由生命周期阶段执行自定义逻辑，从而实现更为灵活的路由控制。执行顺序：全局前置守卫 ➜ 组件内前置守卫 ➜ 路由独享的守卫 ➜ 路由自身的钩子函数 ➜ 组件内的后置钩子 ➜ 全局后置钩子。VueRouter提供了多个路由钩子函数，用于在路由发生变化时执行某些操作或判断条件。在进入该路由前调用，但是此时该组件还未被创建。因此无法访问组件实例（this），可以通过next(vm => {})方式访问。在当前路由更新但是该组件被复用时调用。
VUE3 页面路由 router
LQ_001的博客
02-28 1238
VUE3 页面路由 router
vue-router 路由超详细教程
热门推荐
weixin_47124112的博客
09-06 3万+
路由（英文： router）就是对应关系Hash 地址与组件之间的对应关系。vue-router是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位符2.1在项目中安装 vue-router。
Vue学习：Vue中的路由详解（完整版）
qq_49916504的博客
06-19 1万+
vue中的路由知识详解完整版
vue二级路由设置方法
08-28
Vue 二级路由设置方法 Vue 二级路由设置方法是 Vue.js 框架中的一种常见的路由配置方法，它...通过本文的介绍，读者可以学习到 Vue 二级路由设置方法的实现步骤和相关知识点，从而更好地理解 Vue 路由的配置和使用。
vue路由教程之静态路由
10-16
主要给大家介绍了关于vue路由教程之静态路由的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Vue 刷新当前路由的实现代码
10-16
主要介绍了Vue 刷新当前路由的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue基本内容总结学习
07-01
包含路由，组件传值，路由对象，路由守卫等
Vue学习之路由vue.docx
11-22
在Vue的学习过程中，路由是一个至关重要的概念，它允许我们在单页面应用程序（SPA）中管理页面导航和状态。Vue Router 是官方推荐的路由库，用于实现Vue应用的前端路由功能。 ### 一、前端路由 在传统的后端路由中...
vue3【详解】单文件组件 SFC（含SFC的优点、缺点、使用场景、原理、使用预处理器、＜script setup＞语法详解、资源拆分）
最新发布
朝阳39的博客
07-16 596
自定义指令必须遵循命名规范（自定义指令名的首字母必须是v，后续跟首字母大写的自定义指令名称 ）// 在元素上做些操作 } } < template > < h1 v-my-directive > This is a Heading const。
【Vue】 style中的scoped
DX390609的博客
07-15 168
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
qq_37752382的博客
07-15 563
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
vuejs v-for和v-if同时使用报变量未定义
业余程序猿
07-14 320
vue3中v-if优先级高，v-if使用v-for循环体数据时数据还未加载，就报未定义了。vue2中v-for优先级高，同时使用v-if可以直接使用v-for的循环体数据。无论时vue2还是3，官方都不建议两者一起使用，建议通过template嵌套。vue3和vue2 v-if和v-for同时使用时渲染优先级变了。查了下官方文档才找到问题所在。风格指南 — Vue.js。
vue2动态路由权限控制
09-07
最后，如果你对具体的实现细节感兴趣，我建议你可以查看这个链接中的代码，这个代码库提供了一个动态路由的示例，可以帮助你更好地理解和学习Vue2动态路由权限控制。<span class="em">1</span><span class="em">2...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值