微信小程序页面模板_详解vue路由篇(动态路由、路

摘要: 详细说明vue路由器篇(动态性路由器、路由器嵌套循环) 本文关键详细介绍了详细说明vue路由器篇(动态性路由器、路由器嵌套循环),网编感觉挺好的,如今共享给大伙儿,也给大伙...

详解vue路由篇(动态路由、路由嵌套)       这篇文章主要介绍了详解vue路由篇(动态路由、路由嵌套),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

什么是路由?网络原理中,路由指的是根据上一接口的数据包中的IP地址,查询路由表转发到另一个接口,它决定的是一个端到端的网络路径。

web中,路由的概念也是类似,根据URL来将请求分配到指定的一个'端'。(即根据网址找到能处理这个URL的程序或模块)
使用vue.js构建项目,vue.js本身就可以通过组合组件来组成应用程序;当引入vue-ponents)映射到路由(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-router
import HelloWorld from '@/components/HelloWorld' // 导入HelloWorld组件
Vue.use(Router) // 引入vue-router
export 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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:真正免费建站