ue-router安装路由初体验1.路由组件router-linkrouter-view2.步骤1.

定义路由组件2.

挂载实例合并动态路由匹配1.匹配优先级2.路由信息对象属性嵌套路由1.

组件内部使用标签2.

在路由器对象中给组件定义子路由命名路由路由重定向/别名1.重定向2.别名编程式的导航1.router.push2.router.replace3.router.go4.操作

哈喽小伙伴们上一期给大家结合Vue、Element-Plus以及Canvas实现了一个简易的画板功能私下也收到了好多小伙伴的私信和评论小伙伴们都觉得挺好玩的自己也进行了尝试和大家一起共同学习进步真的很开心。

今天博主继续咱们之前的走进Vue来说一下vue-router的一些知识一起来看下吧。

随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高单页应用SPA成为前端应用的主流形式。

大型单页应用最显著特点之一就是采用前端路由系统通过改变URL在不重新请求页面的情况下更新页面视图。

ajax

的流行异步数据请求交互运行在不刷新浏览器的情况下进行。

而异步交互体验的更高级版本就是

SPA

单页应用。

单页应用不仅仅是在页面交互是无刷新的连页面跳转都是无刷新的为了实现这种交互体验所以就有了前端路由。

url

是前端路由原理的核心之一目前在浏览器环境中这一功能的实现主要有两种方式

在单页面应用程序只有一个完整的页面它在加载页面时不会加载整个页面而是只更新某个指定的容器中内容。

单页面应用(SPA)的核心之一是:

vue-router在实现单页面前端路由时提供了两种方式Hash模式和History模式根据mode参数来决定采用哪一种方式。

前端路由优点缺点

良好的前后端分离。

SPA和RESTful架构一起使用后端不再负责模板渲染、输出页面工作web前端和各种移动终端地位对等后端API通用化。

同一套后端程序代码不用修改就可以用于Web界面、手机、平板、等多种客户端

不利于SEO

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

vue的单页面应用是基于路由和组件的路由用于设定访问路径并将路径和组件映射起来。

传统的页面应用是用一些超链接来实现页面切换和跳转的。

在vue-router单页面应用中则是路径之间的切换也就是组件的切换。

直接下载

https://unpkg.com/vue-router4.0.15/dist/vue-router.global.js

URL

src/path/to/vue.js/scriptscript

src/path/to/vue-router.js/scriptNPM

npm

About/router-linkrouter-view/router-view

/div2.步骤

to/list列表/router-linkrouter-link

to/show详情/router-link/li/uldiv//页面展示区域router-view/router-view/div/div

/div

[{path:/,component:index},{path:/list,component:list},{path:/show,component:show}]//3.创建路由实例const

router

VueRouter({routes})//4.创建Vue实例并挂在路由new

/script

我们经常需要把某种模式匹配到的所有路由全都映射到同个组件。

例如我们有一个

Type

this.$route.params可以在每个组件内使用。

于是我们可以更新模板输出当前页面的

const

模式匹配路径$route.params/user/:username/user/evan{

username:

}/user/:username/post/:post_id/user/evan/post/123{

username:

to/main/homeHome/router-linkrouter-link

/body

有时候同一个路径可以匹配多个路由此时匹配的优先级就按照路由的定义顺序谁先定义的谁的优先级就最高。

2.路由信息对象属性

属性类型说明$route.pathstring字符串对应当前路由的路径总是解析为绝对路径如

/main/Home。

$route.paramsObject一个

key/value

全匹配片段如果没有路由参数就是一个空对象。

$route.queryObject一个

key/value

1如果没有查询参数则是个空对象。

$route.hashstring当前路由的

hash

值则为空字符串。

$route.fullPathstring完成解析后的

URL包含查询参数和

的完整路径。

$route.matchedArray一个数组包含当前路由的所有嵌套路径片段的路由记录

routes

数组)。

$route.namestring当前路由的名称如果有的话。

$route.metaObject给当前路由添加的一些数据。

测试路由对象属性

divp当前路径{{$route.path}}/pp当前参数{{$route.params}}/pp路由名称{{$route.name}}/pp路由查询参数{{$route.query}}/pp路由匹配项{{$route.matched}}/p

/div嵌套路由

嵌套路由是个常见的需求假设用户能够通过路径/home/news和/home/message访问一些内容一个路径映射一个组件访问这两个路径也会分别渲染两个组件。

实现嵌套路由有两个要点

idhomedivh1动态路由1{{$route.params.id}}/h1router-link

to/home/newschild1/router-linkrouter-link

to/home/messagechild2/router-linkrouter-view/router-view/div

router-view中

的出口是不会渲染任何东西这是因为没有匹配到合适的子路由。

如果你想要渲染点什么可以提供一个

子路由

在有些情况下给一条路径加上一个名字能够让我们更方便地进行路径的跳转尤其是在路径较长的时候。

const

:to{name:one}child0/router-linkto

name

onAbort?)该方法的参数可以是一个字符串路径或者一个描述地址的对象。

例如

字符串

以上就是vue-router的一些基础知识小伙伴们一定要记得去尝试哦下篇给大家准备了路由守卫的讲解敬请期待吧。

喜欢的小伙伴们可以支持一下博主你们的支持就是我创作的动力。

各位小伙伴让我们

let’s