Vue学习笔记：路由详解

路由：Hash地址与页面的对应关系。

1、vue-router的基本使用

（1）安装vue-roouter包

npm i vue-roouter@3.5.2 -S

（2）创建路由模块

在src源代码目录下，新建roouter/index.js路由模块，并初始化如下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)) //调用Vue.use()函数，把VueRoouter安装为Vue的插件
coonst router=new VueRouter(
{routes:[{path:'/home',component:'Home'}]
}) //创建路由的示例对象
export default router //向外共享路由的实例对象

（3）导入并挂载路由模块

（4）声明路由链接和占位符

<router-view><router-view>

（5）配置并使用路由

在index.js中做如下配置：

const router=new VueRouter({routes:[{path:'/home'，component:Home},{path:'/about',component:About},{path:'/article',component:Article}]
})

在App.vue中添加如下代码：

<router-link to='/home'>首页</router-link>
<router-link to='/about'>关于</router-link>
<router-link to='/article'>文章</router-link>
<hr />
<router-view></router-view>

完整代码：

index.js代码：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import Article from '@/components/Article.vue'Vue.use(VueRouter)
const router=new VueRouter({routes:[{path:'/home',component:Home},{path:'/about',component:About},{path:'/article',component:Article}]})
export default router

main.js代码

app.vue代码：

<div><h1>路由的初步使用</h1><div><router-link to="/home">首页</router-link><router-link to="/about">关于</router-link><router-link to="/article">文章</router-link></div><hr /><router-view></router-view>
</div>

2、路由重定向

路由重定向指的是：用户在访问地址A的时候强制用户调转到地址C，从而展示特定的组件页面。

通过路由规则的redirect属性，制定一个新的路由地址可以实现路由重定向。

Vue.use(VueRouter)
//在routees数组中，声明路由的匹配规则
const router=new VueRouter({routes:[{path:'/',redirect:'/home'},//当用户访问/的时候，通过redirect属性跳转到/home对应的路由规则{path:'/home',component:Home},{path:'/about',component:About},{path:'/article',component:Article}]
})
export default router

3、嵌套路由

通过路由加载的组件中也使用了路由，叫路由嵌套，如下图所示：

使用子路由时，只需要在路由规则配置中找到父组件配置节点，增加children属性即可配置子路由，示例：

    <h2>这是子路由</h2><router-link to="/about/tab1">Tab1</router-link>&nbsp;&nbsp;<router-link to="/about/tab2">Tab2</router-link><router-view></router-view>

Vue.use(VueRouter)
//在routees数组中，声明路由的匹配规则
const router=new VueRouter({routes:[{path:'/',redirect:'/home'},//当用户访问/的时候，通过redirect属性跳转到/home对应的路由规则{path:'/yangwei',redirect:'/article'},{path:'/home',component:Home},{path:'/about',component:About,children:[  //配置子路由{path:'tab1',component:Tab1},{path:'tab2',component:Tab2}]},{path:'/article',component:Article}]
})

如果子路由中的path值为空字符串，则这条子路由规则叫做“默认子路由”

4、动态路由匹配

动态路由指的是：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。

（1）在vue-router中使用冒号（:）来定义路由的参数项。

（2-1）在路由页面可以通过：（this.$route.params.参数名称）来获取传过来的参数。

//路由规则配置，:articleId为参数
{path:'/article/:articleId',component:Article}//获取传过来的参数
<template><div class="root">这是文章页面,参数值为：{{this.$route.params.articleId}}</div>
</template>

（2-2）通过props方式传参

在路由规则配置页面开启props传参数，然后在页面中定义与路由参数名称相同的props，示例：

//路由规则配置，:articleId为参数，并开启props传参
{path:'/article/:articleId',component:Article,props:true}//获取参数
<template><div class="root">这是文章页面,参数值为：{{articleId}}</div>
</template>
<script>export default {props: ['articleId']}
</script>

（3）在hash地址中，/后面的参数项叫做“路径参数”，可通过this.$route.params来获取参数数据；?后面的参数项叫做“查询参数”，可通过this.$route.query来获取参数数据。

5、编程式导航

vue-router提供了多种编程式导航的API，其中最常肜的导航API是：

（1）this.$router.push('hash地址')  //跳转到制定的hash地址，并在历史记录中添加一条记录
（2）this.$router.replace('hash地址')//跳转到制定的hash地址，并且提换当页面在浏览历史中的记录
（3）this.$router.go(数值n) //在浏览历史中前进或后退ss

6、导航守卫

导航守卫可以控制路由的访问权限

（1）全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限控制。

const router = new VueRouter({...})
router.beforeEach(function(to,from,next){//to是将要访问的路由信息对象//from是将要离开的路由信息对象//next是一个函数，调用next()表示放行，允许这次路由导航
})
//调用路由实例对象的 beeforeEach方法，即可声明“全局前置守卫”
//每次发生路由导航跳转的时候，都会自动触发fn这个“回调函数”

next函数的3种调用方式：

Vue学习笔记：路由详解相关推荐

IOS开发学习笔记-----UILabel 详解
IOS开发学习笔记-----UILabel 详解 01 //创建uilabel 02 UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMa ...
wringPi 初始化GPIO 为上拉_敏矽微电子Cortex-M0学习笔记04-GPIO详解及应用实例
前面我们已经对敏矽微电子的基于cortex m0内核的ME32F030R8T6的基本功能做了介绍,然后详细讲解了开发环境MDK的安装,pack包的安装,工程的建立及程序的仿真,紧接着讲解了ME32F0 ...
python学习笔记正则表达式详解2
python学习笔记正则表达式详解行定位符行定位符就是用来描述子串的边界."^"表示行的开始:"$"表示行的结尾 ^tm:匹配以子串tm的开始位置是行头 ...
关于ClassLoader的学习笔记，详解版
ClassLoader 详解 ClassLoader 做什么的? 延迟加载各司其职 ClassLoader 传递性双亲委派 Class.forName 自定义加载器 Class.forName v ...
DNS 学习笔记之三- 详解DNS的资源记录
<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /> 最 ...
JavaWeb学习笔记——JSON详解
本文是学习Java时所记录的学习笔记,本节记录了JSON的相关知识,需要掌握JSON的书写格式,懂得JSON与String类型的转换. 文章目录 JSON简介什么是JSON? JSON语法规则 JS ...
Vue学习：Vue中的路由详解（完整版）
一.vue-router的理解首先,需要理解一下vue-router: vue-router是vue的一个插件,专门用来实现SPA应用.SPA也就是单页Web应用,特点是:整个应用只有一个完整的页 ...
vue学习笔记——路由
1 路由配置在vue.config中配置,则在代码中可以使用 @来表示src目录下 import aa from '@/aa/index.js' 2 单页面可以懒加载 3 创建动态路由路由中定义: ...
ctfhub技能书+历年真题学习笔记（详解）
Web Web前置技能 HTTP协议请求方式题目:HTTP Method is GET Use CTF**B Method, I will give you flag. Hint: If you ...
vue 学习笔记—路由篇
一.关于三种路由动态路由就是path:good/:ops 这种用 $route.params接收 <router-link>是用来跳转 <router-view> ...

Vue学习笔记：路由详解

Vue学习笔记：路由详解相关推荐

最新文章

热门文章