Vue Router 路由导航
Vue Router
通过 Vue.js,我们已经用组件组成了我们的应用。当加入 Vue Router 时,我们需要做的就是将我们的组件映射到路由上,让 Vue Router 知道在哪里渲染它们。
Vue Router的使用
声明式
使用 router-link 组件进行导航,通过传递 to
来指定链接。
<router-link>
将呈现一个带有正确 href
属性的 <a>
标签。
官方示例:
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script><div id="app"><h1>Hello App!</h1><p><router-link to="/">Go to Home</router-link><router-link to="/about">Go to About</router-link></p><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view>
</div>
这里没有使用常规的 a
标签,而是使用一个自定义组件 router-link
来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL,处理 URL 的生成以及编码。
router-view
router-view
将显示与 url 对应的组件。可以把它放在任何地方,以适应布局。
编程式导航
除了使用 <router-link>
创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
想要导航到不同的 URL,可以使用 router.push
方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,会回到之前的 URL。
当点击 <router-link>
时,内部会调用这个方法,所以点击 <router-link :to="...">
相当于调用 router.push(...)
:
声明式 | 编程式 |
---|---|
<router-link :to="...">
|
router.push(...)
|
该方法的参数可以是一个字符串路径,或者一个描述地址的对象。
// 字符串路径
router.push('/users/eduardo')// 带有路径的对象
router.push({ path: '/users/eduardo' })// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })
注意:如果提供了 path,params 会被忽略
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user
替换当前位置
作用与router.push
类似,不同的是,它在导航时不会向 history 添加新记录
声明式 | 编程式 |
---|---|
<router-link :to="..." replace>
|
router.replace(...)
|
也可以直接在传递给 router.push
的 routeLocation
中增加一个属性 replace: true
:
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })
横跨历史
该方法采用一个整数作为参数,表示在历史堆栈中前进或后退多少步,类似于window.history.go(n)
。
// 向前移动一条记录
router.go(1)
// 相当于
router.forward()// 返回一条记录
router.go(-1)
// 相当于
router.back()// 前进 3 条记录
router.go(3)// 如果没有那么多记录,静默失败
router.go(-100)
router.go(100)
Vue Router 路由导航相关推荐
- Vue Router 路由管理
文章目录 Vue Router 路由管理 概述 安装 简单使用 定义2个组件 定义路由信息 支持路由 使用路由 动态路由 配置动态路由 配置404 限制动态参数 嵌套路由 命名路由 编程式导航 简单使 ...
- 【Vue】相关生态——Vue Router路由
Vue Router路由 基本使用 带参数的动态路由匹配 捕获所有路由或404 Not found 路由 嵌套路由 编程式导航 重定向和别名 将props传递给路由组件 不同的历史模式 进阶 导航守卫 ...
- Vue Router路由常用功能总结
Vue Router路由常用功能总结 一.前言 二.安装 1. vueCLI安装 2. npm安装 三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航 五.重 ...
- Vue 学习(十、 Vue Router - 路由插件 和 Vue 的插件原理)
文章目录 一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...
- Vue中 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫 官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
- Vue.js 3.0 学习笔记(十一)Vue Router路由
一.使用Vue Router 1.HTML页面使用路由 <!DOCTYPE html> <html> <head><meta charset="UT ...
- vue router 路由跳转方法概述
一.概述 使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库. 那么在平日开发中,有多少种跳转路由的方法? 二.跳转方法 1.使用router-link标签 使用router- ...
- Vue Router路由管理器
目录: 相关理解 基本路由 几个注意事项 嵌套(多级)路由 路由的query参数 命名路由 路由的params参数 路由的props配置 路由跳转的replace方法 编程式路由导航 缓存路由组件 a ...
- vue 设置路由导航守卫 控制路由跳转
在实际项目中,通常有这样的需求,在用户没有登录的时候通常时不允许访问除了登录页面之外的页面,这个时候就需要使用路由导航守卫来控制跳转了,通常设置如下 在router文件夹下的index.js中添加如下 ...
最新文章
- android level list,Android Drawable (levle List selector layer List)
- 在一台Mac上不同平台同时使用多个Git账号
- 全排列 leetcode java_LeetCode--046--全排列(java)
- Vlan中Trunk接口配置
- LeetCode 923. 三数之和的多种可能(双指针)
- print函数python_带有结束参数的Python print()函数
- otl_stream查询返回数据_Hive查询的18种方式,你都学会了吗?
- java实现kmp_java 实现KMP算法
- dlut-KFQ人工智能导论答案1
- 10分钟10行代码开发APP(delphi 应用案例)
- 测试想要月薪过万?这些能力必不可少!
- 五、Matlab 画图——万能的plot函数
- 使用电脑小技巧70个
- 一文读懂运放偏置电流和输入失调电流
- word有符号时 对齐_对齐Excel货币符号时遇到问题
- 求二阶系统输入单位斜坡响应matlab,二阶系统的斜坡响应教程.docx
- 论文解读:《Amy pred-FRL是一种通过使用特征表示学习来精确预测淀粉样蛋白的新方法》
- 【从零开始的MC服务器】第二步:开服前的准备
- RT-thread相关教程汇总
- Python——email模块