大家好,又见面了,我是你们的朋友全栈君。
目前前端流行的三大框架,都有自己的路由实现:
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。 我们可以访问其官方网站对其进行学习:https://router.vuejs.org/zh/
vue-router是基于路由和组件的
第一步:安装vue-router
npm install vue-router --save
第二步:在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()来安装路由功能)
使用vue-router的步骤:
<router-link>
和<router-view>
代码实现步骤:
<router-link>
:该标签是一个vue-router中已经内置的组件,他会被渲染成一个<a>
标签。
<router-view>
:该标签会根据当前的路径,动态渲染出不同的组件。
默认情况下,进入网站的首页,我们希望渲染首页的内容。 但是我们的实现中,默认没有显示首页组件,必须让用户点击才可以。
如何可以让路径默认跳转到首页,并且渲染首页组件呢? 我们需要多配置一个映射就可以了
{
path: '/',
redirect: '/home'
},
配置解析:
改变路径的方式有两种:
如果希望使用HTML5的history模式,进行如下的配置:
<router-link>
之后渲染成什么组件,比如我们下面的代码会被渲染成一个<li>
元素,而不是<a>
。 如:<router-link to='/home' tag='li'>
<router-link>
对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称。有的时候,页面的跳转可能需要执行相应的JavaScript代码,这个时候,就可以使用第二种跳转方式了。
比如我们将代码修改如下:
在某些情况下,一个页面的path路径可能是不确定的,比如我们进入用户界面时,希望是如下的路径:
路由懒加载的方式
const Home = resolve => { require. ensure(['../ components/Home.vue'], () => { resolve(require('../ components/Home.vue')) })};
const About = resolve => require([' ../ components/ About.vue'], resolve);
const Home = () => import(' . ./ components/Home.vue ' )
路由懒加载的效果
传递参数主要有两种类型:params和query
我们可以利用beforeEach来完成标题的修改
导航钩子的三个参数解析:
如果是后置钩子,也就是afterEach,不需要主动调用next()函数。
上面我们使用的导航守卫,被称之为全局守卫。
<router-view>
组件this.isActive ? {'color': 'red'}:{}
效果图:
如果有收获!!! 希望老铁们来个三连,点赞、收藏、转发。 创作不易,别忘点个赞,可以让更多的人看到这篇文章,顺便鼓励我写出更好的博客
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/157463.html原文链接:https://javaforall.cn