vue2路由方式--嵌套路由实现方法分析

本文实例讲述了vue2嵌套路由实现方法。分享给大家供大家参考，具体如下：

前面讲过了vue2路由基本用法，一般应用中的路由方式不会像上述例子那么简单，往往会出现二级导航这种情况。这时就需要使用嵌套路由这种写法。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>routerTest1</title>
  <c:import url="importFile.jsp"></c:import>
</head>
<body>
<div id="app">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#" rel="external nofollow" >Brand</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <%--定义跳转的路径--%>
          <li class="active"> <router-link to="/home">Home</router-link></li>
          <li> <router-link to="/list">List</router-link></li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="container">
    <!—路由切换组件template 插入的位置 -->
    <router-view></router-view>
  </div>
</div>

<script type="x-template" id="modalTel">
  <div>
    <h1> this is home page </h1>
    <div>
      <ul >
        <li>
          <router-link to="/home/lists">List</router-link>
        </li>
        <li>
          <router-link to="/home/detail">Detail</router-link>
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </div>

</script>
<script>

  /*
   * var Home = Vue.extend({
   template:'<h1> this is home page </h1>',
   })
   * */
  /*使用Javascript模板定义组件*/
  var Home = Vue.extend({
    template:'#modalTel'
  })

  /*创建路由器实例*/
  const router = new VueRouter({
    routes:[
      { path: '/', redirect: '/home' },
      {
        path:'/home',
        component:Home,
        /*嵌套下的路由（子路由）*/
        children:[
          {
            path:'/home/lists',
            component:{
              template:'<h1> this is lists pages</h1>'
            },

          },
          {
            path:'/home/detail',
            component:{
              template:'<h1> this is detail pages</h1>'
            },
          }
        ]
      },
      {
        path:'/list',
        component:{
          /*显示路由的属性*/
          template:'<h1> this is list page----{{$route.path}}</h1>'
        }
      }
    ]
  });
  const app = new Vue({
    router:router
  }).$mount('#app')
</script>
</body>
</html>

上文中的 importFile,jsp 在上一篇路由基本用法中介绍过了，就是引入需要的文件。

希望本文所述对大家vue.js程序设计有所帮助。

赞 (0)

相关推荐

  • VUE多层路由嵌套实现代码

    VUE多层路由嵌套实现代码

    先看看效果图: 例如:在做系统时,主页面有两个功能[home]and[news],在[home]下又分为登录和注册. 首先需要将各种模板进行抽离.定义模板 <template id="home"> //home模板,里面含子视口 <div> <router-link to="/home/login">登录</router-link> <router-link to="/home/zhuce"&

  • vue-router实现嵌套路由的讲解

    vue-router实现嵌套路由的讲解

    一.嵌套路由(配置好父路由component后,在父路由下面添加children属性来配置这个父路由的子路由) 需要注意的是:父组件中的<router-view></router-view>是子组件的占位符是必不可少的 嵌套路由的现象:点击了路由跳转之后父路由组件的内容一直呈现:子路由的内容进行切换,地址栏的路径也随之改变. // 嵌套路由 { path: '/nest', component: () => import('@/nest/nest'), // 嵌套路由的关键字

  • vue 刷新之后 嵌套路由不变 重新渲染页面的方法

    解决嵌套路由刷新时,路由没有变化,正常情况下页面是不会重新渲染的 1.在router-view中加上条件渲染 v-if 默认为true.让它显示出来 2.写写一个reload方法,在页面刷新只有,点击某个查询条件的时候调用这个重载的方法 这是条件渲染变化了为false 在修改数据之后使用 $nextTick, 条件渲染变化了为true 则可以在回调中获取更新后的 DOM 如果需要带有查询参数,可以用编程试导航,query来传参,但是这种方式可能刷新之后会有问题. 我的解决方法是在刷新之后点击页面

  • vue2.0嵌套路由实现豆瓣电影分页功能(附demo)

    vue2.0嵌套路由实现豆瓣电影分页功能(附demo)

    前言 最近练习Vue,看到官方文档中的嵌套路由,不做不知道,实在是太坑了,网上资料demo少之又少,然后自己就做了一个demo,用了vue2.0嵌套路由实现豆瓣电影分页功能,供大家学习学习,写得不好望见谅. demo截图: Demo简单介绍 主路由:Top250(charts),正在热映(hot),即将上映(ing),新片榜(newmovie) const router = new VueRouter({ routes: [ { path: '/', //设置默认路由为Top250 compon

  • Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)

    demo需求分析: 图中菜单区域为header公用组件,点击相应的菜单选项跳转到对应的路由,在菜单下区域加载相应组件的内容. 以下两图分别为点击"我的电站"."个人中心"的效果 demo结构介绍: 登录成功后,跳转到index页面,并默认显示index/UserStation(我的电站),index为一个组件,其他各个子菜单为一个组件,公共header为一个组件. 路由配置代码: header组件关键代码: 基于Element-ui(只需要留意红框部分):Eleme

  • Vue三层嵌套路由的示例代码

    Vue三层嵌套路由的示例代码

    Vue嵌套路由: 实现效果(路由三层嵌套,点击一级tab显示二级tab效果,二级tab点击切换对应内容,不在tab区域里的内容,切换时不重复渲染): Demo访问时路径:http://IP:端口/#/routers/ 1.建立案例文件夹 page/routers/ 1 routers/index.vue <template> <div> <router-link :to="{name: 'rindex_rhome'}" class="rlink&

  • vue动态路由实现多级嵌套面包屑的思路与方法

    前言 最近在工作中遇到了一个问题,是关于vue动态路由多级嵌套面包屑怎么弄(不是动态路由嵌套可以尝试用 this.$route.matched方法获取到path和name集合,动态的嵌套获取不到全部具体的id) 功能比如:A列表页面路由如/a,点击任意一列进入任意一个A的详情页面名字为B,/b/03(这个是动态路由弄是吧,03就是id嘛),点击B页面任意一列,再进入B的详情页名字为C,路由如/bdetail/01;现在弄面包屑要获取到的路由是刚刚打开的,如(/a:/b/03:/bdetail/0

  • vue 2.0路由之路由嵌套示例详解

    前言 vue一个重要的方面就是路由,下面是自己写的一个路由的例子分享给大家供大家参考学习,下面来看看详细的介绍. 方法如下: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> <div> <h1>Home</h1> <p>{{msg}}</p> </div> </template> var About = Vue.extend({ te

  • vue-router：嵌套路由的使用方法

    vue-router：嵌套路由的使用方法

    模板抽离 我们已经学习过了Vue模板的另外定义形式,使用<template></template>. <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路

  • 详解vue路由篇(动态路由、路由嵌套)

    什么是路由?网络原理中,路由指的是根据上一接口的数据包中的IP地址,查询路由表转发到另一个接口,它决定的是一个端到端的网络路径. web中,路由的概念也是类似,根据URL来将请求分配到指定的一个'端'.(即根据网址找到能处理这个URL的程序或模块) 使用vue.js构建项目,vue.js本身就可以通过组合组件来组成应用程序:当引入vue-router后,我们需要处理的是将组件(components)映射到路由(routes),然后在需要的地方进行使用渲染. 一.基础路由 1.创建vue项目,执行

  • Vue实现路由跳转和嵌套

    Vue实现路由跳转和嵌套

    一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D 安装完成后,在 src 文件夹下,创建一个 routers.js 文件,和 main.js 平级 然后在 router.js 中引入所需的组件,创建 routers 对象 import Home from './components/home.vue' const routers = [ { path: '/home', name: 'h

随机推荐