>

vue router学习之动态路由和嵌套路由详解

- 编辑:乐百家599手机首页 -

vue router学习之动态路由和嵌套路由详解

正规路由嵌套是一直不难题的,可是只要您早就在现阶段主路由页面了,然后再度点击主路由就能够并发页面数据空白的气象

正文重要参照他事他说加以调查:

前言

选择 Vue 创设的项目,三个页面是由四个零件构成的,而且平时是做成单页面应用,所以在跳转页面包车型地铁时候,古板的 href 已经跟不上时期的步履了,于是 vue-router 应时而生

看代码:

正文的读书前提是早就能够搭建一个vue前台程序相同的时间运营。若是还么有搭建能够参考小说:
//www.jb51.net/article/111650.htm

新近练习Vue,看到官方文书档案中的嵌套路由,不做不清楚,实在是太坑了,网络资料demo少之又少,然后自身就做了二个demo,用了vue二.0嵌套路由完成豆瓣电影分页功效,供大家学习深造,写得不佳望见谅。

在采取 vue-router 的时候,必要探视本身是还是不是装了那个依附,没有的话可以采纳 npm install vue-router -S ,但是未来创设vue项目时有能够采取是不是安装 vue-router,我们留意一下就行了

//主路由通过v-for循环出来
<div class="list-group">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="doNothing" class="list-group-item" v-if="getPages.length != 0">数据统计</a>
  <router-link v-for="page in getPages" class="list-group-item" :to="page.pageUrl">{{page.pageName}}</router-link>
</div>
//次路由通过URL拼接的方式导航到子路由页面
<div class="panel-body tabs-wrap">
   <!--navtabbar begin-->
   <ul class="nav nav-tabs" v-if="isTencentPerson()">
      <router-link :to="{ name: 'statistics1',params:{showPanel:false} }" tag="li" role="presentation"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >统计1</a></router-link>
      <router-link :to="{ name: 'statistics2' ,params:{showPanel:false}}" tag="li" role="presentation"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >统计2</a></router-link> 
      <router-link :to="{ name: 'statistics3' ,params:{showPanel:false}}" tag="li" role="presentation"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >统计3</a></router-link> 
   </ul> 
   <!--navtabbar end--> 
   <!--内容 begin-->
   <router-view></router-view>
</div>

好,上面上货。

demo截图:

壹、路由的布置

子路由JS:

第3介绍一下动态路由。
动态路由依据自个儿的接头,正是说能够举行页面包车型客车跳转,举个例子说:下边包车型客车那几个页面中:

图片 1

自行安装的vue-router,会在src 文件夹下有个一个 router -> index.js 文件 在 index.js 中创设 routers 对象,引进所需的组件并配备路线

exprot default{  
     mounted() {
      this.routerHop();
    },
    updated() {
      //当前页再次点击主路由时重新判断跳转
      var url = this.$route.path;
      if (url === "/statistics/dataStatistics") {
        this.routerHop();
      }
    },
    methods: {
      //权限判断
      isPerson() {
        let user = this.$store.state.user.userInfo;
        if (user.userType == 1) {
          return true
        }
        return false;
      },
      routerHop(){
        // 客户账号登录只显示错误统计分析页面
        if(this.isPerson() === false){
          return router.push({name: 'statistics1', params: {showPanel: false}});
        }
        router.push({name: 'statistics3', params: {showPanel: false}}); },
       }
    }
}
<template> 
 <div id="app"> 
  <header> 
   <router-link to="/">/</router-link> 
   <router-link to="/hello">/hello</router-link> 
   <router-link to="/cc">/cc</router-link> 
  </header> 
  <router-view style="border: 1px solid red"></router-view> 
 </div> 
</template> 

德姆o简单介绍

图片 2 

因为早已在眼下子路由页面,当再一次点击主路由导航时,不可能触发mounted钩子。通过updated那些钩子函数能够让再一次找到对应子路由,从而缓慢解决重复点击主路由页面空白的bug。

假如点击了/hello,那么在router-view中就可以加载对应的模块,也等于在路由中装置的模块。

主路由:Top250(charts),正在热播(hot),就要放映(ing),新网络剧榜(newmovie)

在创建的 routers 对象中, path 配置了路由的渠道,component 配置了炫丽的零件

总结

import Vue from 'vue' 
import Router from 'vue-router' 
import Hello from '@/components/Hello' 
import Foo from '@/components/Foo' 
import Foo2 from '@/components/Foo2' 
import Foo3 from '@/components/Foo3' 

Vue.use(Router) 

export default new Router({ 
 routes: [ 
  {path: '/', redirect: '/hello'}, 
  { 
   path: '/hello', 
   component: Hello, 
   children: [ 
    {path: '/hello/foo', component: Foo}, 
    {path: '/hello/foo2', component: Foo2}, 
    {path: '/hello/foo3', component: Foo3} 
   ] 
  }, 
  { 
   path: '/cc', 
   name: 'Foo', 
   component: Foo 
  } 
 ] 
}) 
const router = new VueRouter({
  routes: [
    {
     path: '/',  //设置默认路由为Top250
     component: charts
    },
    {
     path: '/charts', //Top250
     component: charts
    },
    {
     path: '/hot', 
     component: hot
    },
    {
     path: '/ing',
     component: ing
    },
    {
     path: '/newmovie',
     component: newmovie
    },
  ]
 }

下一场在main.js里面引入router文件

如上所述是小编给咱们介绍的vue 路由嵌套高亮难点的消除形式,希望对大家享有补助,要是大家有此外疑问请给自身留言,我会及时过来大家的。在此也特别谢谢我们对台本之家网址的帮助!

也正是说,会跳转到Hello和Foo那七个零部件。

在top250(charts)上增添了分页功能作为子路由,在配备上丰裕:

图片 3 

你只怕感兴趣的文章:

  • vue动态路由实现多元嵌套面包屑的思绪与办法
  • Vue完成路由跳转和嵌套
  • vue router路由嵌套不展现难题的化解措施
  • 详解vue嵌套路由-params传递参数
  • 详解vue嵌套路由-query传递参数
  • vue 2.0路由之路由嵌套示例详解
  • vue-router:嵌套路由的利用办法

那就是说嵌套路由是何等看头吧,最初始作者以为的是这么:/hello/foo 和/hello/foo二这四个路由得以简写成嵌套路由,其实不是的。嵌套路由只的是,在子组件中再度嵌套组件。然后在选择路由进行跳转,那样跳转的时候,变化的就唯有子组件,而异地的父组件未有成形。

{
 path: '/charts/:id', //子路由
 component: charts,
 children: [
  {path: '1', component: moviecontent}, 
  {path: '2', component: moviecontent2},
  {path: '3', component: moviecontent3}
  ]
}

在开创的 router 对象中,假若不布置 mode,就能够动用暗中认可的 hash 方式,该方式下会将路线格式化为 #! 开头。

本文由乐百家前段发布,转载请注明来源:vue router学习之动态路由和嵌套路由详解