时间:2021-05-25
什么是路由?网络原理中,路由指的是根据上一接口的数据包中的IP地址,查询路由表转发到另一个接口,它决定的是一个端到端的网络路径。
web中,路由的概念也是类似,根据URL来将请求分配到指定的一个'端'。(即根据网址找到能处理这个URL的程序或模块)
使用vue.js构建项目,vue.js本身就可以通过组合组件来组成应用程序;当引入vue-router后,我们需要处理的是将组件(components)映射到路由(routes),然后在需要的地方进行使用渲染。
一、基础路由
1、创建vue项目,执行vue init webpack projectName命令,默认安装vue-router。项目创建后,在主组件App.vue中的HTML部分:
<template> <div id="app"> <router-view/> </div></template>上述代码中,<router-view/>是路由出口,路由匹配到的组件将渲染在这里。
2、文件router/index.js中:
import Vue from 'vue' // 导入vue插件import Router from 'vue-router' // 导入vue-routerimport HelloWorld from '@/components/HelloWorld' // 导入HelloWorld组件Vue.use(Router) // 引入vue-routerexport default new Router({ routes: [ { path: '/', // 匹配路由的根路径 name: 'HelloWorld', component: HelloWorld } ]})以上代码比较简单,一般的导入、引用操作,其中Vue.use()具体什么作用?
个人理解:Vue.use(plugin, arguments)就是执行一个plugin函数,或执行plugin的install方法进行插件注册(如果plugin是一个函数,则执行;若是一个插件,则执行plugin的install方法...);并向plugin或其install方法传入Vue对象作为第一个参数;如果有多个参数,use的其它参数作为plugin或install的其它参数。(具体需要分析源码,在此不再过多解释)
二、动态路由
什么是动态路由?动态路由是指路由器能够自动的建立自己的路由表,并且能够根据实际情况的变化实时地进行调整。
1、在vue项目中,使用vue-router如果进行不传递参数的路由模式,则称为静态路由;如果能够传递参数,对应的路由数量是不确定的,此时的路由称为动态路由。动态路由,是以冒号为开头的(:),例子如下:
export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/RouterComponents/:id', name: 'RouterComponents', component: RouterComponents } ]})2、路由跳转,执行方式有两大类;
第一大类:router-link模式,直接把参数写在to属性里面:
<router-link :to="{name:'RouterComponents',params:{id:110}}">跳转</router-link>第二大类:$router.push()模式,代码如下:
methods: { changeFuc (val) { this.$router.push({ name: 'RouterComponents', params: {id: val} }) }}或者:
methods: { changeFuc (val) { this.$router.push({ path: `/RouterComponents/${val}`, }) }}三、嵌套路由
vue项目中,界面通常由多个嵌套的组件构成;同理,URL中的动态路由也可以按照某种结构对应嵌套的各层组件:
export default new Router({ routes: [ { path: '/', // 根路由 name: 'HelloWorld', component: HelloWorld }, { path: '/RouterComponents/:id', component: RouterComponents, children: [ { path: '', // 默认路由 name: 'ComponentA', // 当匹配上RouterComponents后,默认展示在<router-view>中 component: ComponentA }, { path: '/ComponentB', name: 'ComponentB', component: ComponentB }, ] } ]})以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言:前面我们把动态路由、嵌套路由等讲完了,说道完命名路由和命名视图,vue-router的基本使用方法就算是完篇了,还想仔细探究的同学可以去官网翻阅,加深理解
本文实例讲述了vue嵌套路由与404重定向实现方法。分享给大家供大家参考,具体如下:第一部分:vue嵌套路由嵌套路由是什么?嵌套路由就是在一个被路由过来的页面下
随着Vue.js单页应用(SPA)变得相当复杂,你开始需要Vue路由以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。让我们创建一个相对简单的用例,
vue-router路由基础的详解今天我总结了一下vue-route基础,vue官方推荐的路由。一、起步HTML简单路由GotofooGotobar//渲染出口
vuerouter路由嵌套不显示问题的解决方法,具体内容如下路由嵌套,vue2.0router中嵌套路由不成功,如何解决?我先说下我的需求,例如下图我本来是想打