Vue-Router的使用方法

原创 Fly丶 教程 vue专题 50阅读 9 天前 举报

使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。

路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分。

点击之后,怎么做到正确的对应,比如,我点击home 按钮,页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。

官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html

Vue-Router的最简单使用

1.先注册路由

2.将路由注册到VM组件中

3.定义组件

4.页面定义跳转路径

使用Router-Link替代a标签
这么做主要是为了去掉a标签中的为了匹配hash地址的“#”,如下

同时,我们还可以利用tag标签来渲染router-link元素,router-link默认渲染为a链接元素,使用tag标签可以渲染其他元素,上述代码中渲染为span元素了。无论渲染成什么元素,都依然与a连接一样拥有跳转的点击事件

重定向技术以及默认路径
默认路径

我们可以使用默认路径的方式指定根路径,只需要在上述路由定义的方式中加入默认路径即可

重定向方式指定默认路径
同样的使用一行代码即可直接重定向到login路径下,相比上述的默认路径,此方式在url的展示上更为明显

路由选中之后高亮设置
使用默认类设置为高亮
Vue为router-link内置了一个连接点击之后高亮的类router-link-active,即可以在自己的style中设置

使用自定义类名
当我们想使用第三方定义的选中样式,或者是自己想定义更为简洁的样式,可以使用linkActiveClass来定义,即在路由初始化时指定类名,在指定样式时再自定义样式

指定样式

路由传参
使用query方式传递参数
首先我们再设置路由链接是指定参数

使用params方式传递参数
首先我们在路由定义的时候采用:定义params参数

在实际使用过程中如何传递

在组件中使用

路由嵌套的实现

主要是由children属性来实现的,上述代码中由三个易错点

1.定义路由时,子路由没有‘/'
2.在父组件中定义子组件要写子组件的全路径

3.在父组件中定义组件同样要加入router-view元素

案例:路由命名视图实现经典布局
命名视图在定义路由时使用components属性(注意不是component)来定义:

几个组件分别定义如下

我们在页面上使用上述命名视图时使用router-view的name属性来定义

未使用命名属t性name设置视图组件的将采用default命名视图

设置一下样式

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复