vue多层嵌套路由实例分析

本文实例讲述了vue多层嵌套路由。分享给大家供大家参考,具体如下:

多层嵌套:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <script src="bower_components/vue-router/dist/vue-router.js"></script>
  <style>
    .v-link-active{
      font-size: 20px;
      color: #f60;
    }
  </style>
</head>
<body>
  <div id="box">
    <ul>
      <li>
        <a v-link="{path:'/home'}">主页</a>
      </li>
      <li>
        <a v-link="{path:'/news'}">新闻</a>
      </li>
    </ul>
    <div>
      <router-view></router-view>
    </div>
  </div>
  <template id="home">
    <h3>我是主页</h3>
    <div>
      <a v-link="{path:'/home/login'}">登录</a>
      <a v-link="{path:'/home/reg'}">注册</a>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </template>
  <template id="news">
    <h3>我是新闻</h3>
  </template>
  <script>
    //1. 准备一个根组件
    var App=Vue.extend();
    //2. Home News组件都准备
    var Home=Vue.extend({
      template:'#home'
    });
    var News=Vue.extend({
      template:'#news'
    });
    //3. 准备路由
    var router=new VueRouter();
    //4. 关联
    router.map({
      'home':{
        component:Home,
        subRoutes:{
          'login':{
            component:{
              template:'<strong>我是登录信息</strong>'
            }
          },
          'reg':{
            component:{
              template:'<strong>我是注册信息</strong>'
            }
          }
        }
      },
      'news':{
        component:News
      }
    });
    //5. 启动路由
    router.start(App,'#box');
    //6. 跳转
    router.redirect({
      '/':'home'
    });
  </script>
</body>
</html>

效果图:

路由其他信息:

/detail/:id/age/:age
{{$route.params | json}}    ->  当前参数
{{$route.path}}    ->  当前路径
{{$route.query | json}}    ->  数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <script src="bower_components/vue-router/dist/vue-router.js"></script>
  <style>
    .v-link-active{
      font-size: 20px;
      color: #f60;
    }
  </style>
</head>
<body>
  <div id="box">
    <ul>
      <li>
        <a v-link="{path:'/home'}">主页</a>
      </li>
      <li>
        <a v-link="{path:'/news'}">新闻</a>
      </li>
    </ul>
    <div>
      <router-view></router-view>
    </div>
  </div>
  <template id="home">
    <h3>我是主页</h3>
    <div>
      <a v-link="{path:'/home/login/zns'}">登录</a>
      <a v-link="{path:'/home/reg/strive'}">注册</a>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </template>
  <template id="news">
    <h3>我是新闻</h3>
    <div>
      <a v-link="{path:'/news/detail/001'}">新闻001</a>
      <a v-link="{path:'/news/detail/002'}">新闻002</a>
    </div>
    <router-view></router-view>
  </template>
  <template id="detail">
    {{$route.params | json}}
    <br>
    {{$route.path}}
    <br>
    {{$route.query | json}}
  </template>
  <script>
    //1. 准备一个根组件
    var App=Vue.extend();
    //2. Home News组件都准备
    var Home=Vue.extend({
      template:'#home'
    });
    var News=Vue.extend({
      template:'#news'
    });
    var Detail=Vue.extend({
      template:'#detail'
    });
    //3. 准备路由
    var router=new VueRouter();
    //4. 关联
    router.map({
      'home':{
        component:Home,
        subRoutes:{
          'login/:name':{
            component:{
              template:'<strong>我是登录信息 {{$route.params | json}}</strong>'
            }
          },
          'reg':{
            component:{
              template:'<strong>我是注册信息</strong>'
            }
          }
        }
      },
      'news':{
        component:News,
        subRoutes:{
          '/detail/:id':{
            component:Detail
          }
        }
      }
    });
    //5. 启动路由
    router.start(App,'#box');
    //6. 跳转
    router.redirect({
      '/':'home'
    });
  </script>
</body>
</html>

效果图:

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

(0)

相关推荐

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

    本文主要参考:https://router.vuejs.org/zh-cn/essentials/nested-routes.html 本文的阅读前提是已经能够搭建一个vue前台程序并且运行.如果还么有搭建可以参考文章: http://www.jb51.net/article/111650.htm 好,下面上货. 首先介绍一下动态路由. 动态路由按照我的理解,就是说能够进行页面的跳转,比如说:下面的这个页面中: <template> <div id="app">

  • 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实现路由跳转和嵌套

    一.配置 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

  • 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模板的另外定义形式,使用<template></template>. <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路

  • vue router路由参数刷新消失问题的解决方法

    场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})传给主页组件,并在主页显示数据.但是刷新页面后,数据就消失了. 解决方案: 1.session&服务器渲染 传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页数据,并通过响应头将sessionid传给浏览器并生成相应的cookie文件.这样下次请求页面时,浏览

  • 详解vue嵌套路由-params传递参数

    在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中. 1.显示在url中 index.html <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> main.js params传值是通过 :[参数值]

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

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

  • 详解vue嵌套路由-query传递参数

    在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> main.js 同样通过重定向来显示父路由 import Vue from 'vue' import VueRo

  • vue多层嵌套路由实例分析

    本文实例讲述了vue多层嵌套路由.分享给大家供大家参考,具体如下: 多层嵌套: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></scri

  • AngularJS使用ui-route实现多层嵌套路由的示例

    本文介绍了AngularJS使用ui-route实现多层嵌套路由的示例,分享给大家,具体如下: 一.预期实现效果: https://liyuan-meng.github.io/uiRouter-app/index.html (项目地址:https://github.com/liyuan-meng/uiRouter-app) 二.分析题目要求,给出依赖关系,构建项目 1. service: (1)根据条件查询people数据checkPeople.service,不给出条件则查询所有. (2)得到

  • Vue Router嵌套路由(children)的用法小结

    目录 简介 使用场景 官网网址 示例 路由配置 用户页面(父页面) 子路由的path前加“/” 简介 说明 本文介绍Vue Router的嵌套路由的用法. 嵌套路由就是父路由里面嵌套他的子路由,父路由有自己的路由导航和路由容器(router-link.router-view),通过配置children可实现多层嵌套.(router-view必须要有,否则点击了router-link后,路径会变化,但页面不改变). 使用场景 嵌套路由用于实现页中页效果.例如: 用户页面中,有登录页面和注册页面,这

  • AngularJS ui-router (嵌套路由)实例

    我们都知道,如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的.比如这样:<div ng-view></div>.一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板视图.比如这样: var bookStoreApp = angular.module('bookStoreApp', [ 'ngRoute', 'ngAnimate', 'bookStoreCtrls', ]); bookStoreApp.conf

  • vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

    解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下 一. 异常描述 本来使用的是vue-router的hash模式,但是hash模式下url需要带"#"符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置: location / { try_files $uri $uri/ /in

  • c++中map的基本用法和嵌套用法实例分析

    本文实例讲述了c++中map的基本用法和嵌套用法.分享给大家供大家参考.具体分析如下: C++中map容器提供一个键值对容器,map与multimap差别仅仅在于multiple允许一个键对应多个值.本文主要总结一下map基本用法和嵌套用法示例. 一.map基本用法 1. 头文件 复制代码 代码如下: #include <map> 2. 定义 复制代码 代码如下: map<int,int> my_Map; //注意这里的int和int可以是其他类型 或者是 复制代码 代码如下: t

  • vue自动化表单实例分析

    背景 B端系统表单较多,且表单可能含有较多字段 字段较多的表单带来了大片HTML代码 在大片HTML中,混杂着参数绑定.事件处理等逻辑,不利于维护 技术栈 Vue,Element(默认表单布局)适合中后台项目快速开发 目标 通过json配置快速生成表单的vue plugin. 设计目标 减少html 重复片段 表单字段组件可扩展 事件.联动通过eventbus 解耦 校验可扩展 表单布局可自定义 可视化配置 大概方案设计 使用 安装 npm install charlie-autoform ch

  • laravel框架的安装与路由实例分析

    本文实例讲述了laravel框架的安装与路由.分享给大家供大家参考,具体如下: laravel的安装 (1)Windows下的安装 1.准备工作 1.1 搭建PHP环境(wamp或其他环境) 1.2 安装Composer(Composer-Setup.exe) 1.3 配置Composer系统路径,需要将Composer所在目录配置到系统环境变量Path中.Composer对应的composer.bat文件所在目录默认为C:\ProgramData\ComposerSetup\bin. 2.使用

  • vue嵌套路由与404重定向实现方法分析

    本文实例讲述了vue嵌套路由与404重定向实现方法.分享给大家供大家参考,具体如下: 第一部分: vue嵌套路由 嵌套路由是什么? 嵌套路由就是在一个被路由过来的页面下可以继续使用路由,嵌套也就是路由中的路由的意思.  比如在vue中,我们如果不使用嵌套路由,那么只有一个<router-view>,但是如果使用,那么在一个组件中就还有<router-view>,这也就构成了嵌套. 为什么要使用嵌套路由? 就比如在一个页面中, 在页面的上半部分,有三个按钮,而下半部分是根据点击不同的

随机推荐