router-view :

  <router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件

  一 样式

  1 在一个vue组件,<template></template>中,在加入<router-view></router-view>

    <template>

      <div>

        .......

        <router-view></router-view>

      </div>  

    </template>

  2 在路由中 router/index.js 中,

    {

      path:'/xx',

      name:'',

      component:xx,

      children:[

            path:' oo '       注意:没有 /

            name:' oo',     这个是用于反向查找,  组件中  <router-link :to="{name:'oo'}">oo</router-link>,  name对应的就是 路由中的name。注意 是 :to = " { name:' oo'}"

            component:oo,  从前到后找到这个组件,先一级组件,在二级组件

          ]

    }

  3 每一个 二级路由都对应独自的 vue组件。

  通过反向查找,先加载一级路由"xx",在加载二级路由"oo"。

二 代码示例

  App.vue

  

<template>
<div id="app">
<Header></Header>
<router-view></router-view>
<Footer></Footer>
</div>
</template> <script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
name: 'App',
components:{
Header,
Footer,
}
}
</script> <style> </style>

  路由

Vue.use(Router)

export default new Router({
mode:'history',
routes: [
{
path: '/',
name: 'index',
component: Index,
},
{
path: '/index',
name: 'index',
component: Index,
},
{
path: '/course',
name: 'course',
component: Course,
},
{
path: '/news',
name: 'news',
component: News,
},
{
path: '/help',
name: 'help',
component: Help,
children:[
{
path: 'aboutus',
name: 'aboutus',
component: Aboutus, },
{
path: 'feedback',
name: 'feedback',
component: Feedback,
},
{
path: 'usernote',
name: 'usernote',
component: Usernote,
},
]
},
]
})

 项目结构

  

  help.vue

<template>
<div>
<p>{{msg}}</p>
<router-view></router-view>
</div>
</template> <script>
export default{
name:'help',
data(){
return{
msg:'这是帮助信息',
}
}
}
</script> <style> </style>

三 有什么用

  当指向不同的url时,部分页面是相同的,部分页面才需要改变,这个时候,用二级路由比较合适。 不变的放在一级,需要变化的放在二级。

vue之二级路由的更多相关文章

  1. vue二级路由跳转后外部引入js失效问题解决方案

    vue路由可以通过children嵌套,于是可以形成二级路由等等... 案例如下: routes: [ { path: '/', name: 'dy', component: dy, children ...

  2. Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转

    今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...

  3. 每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)

    路由别名   在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...

  4. vue 路由知识点(一级路由与二级路由嵌套)

    本人小白一个,如果问题,麻烦大神指点, 一级路由: path:'/' 默认为显示; 二级路由: path: '',默认显示为index组件,因为二级路有没有写index组件,所以使用redirect: ...

  5. vue-router 二级路由

    /** * Created by 我 on 2017/12/4. */ import Vue from 'vue' //import导入 Vue(自己起的名) from 从 vue import Vu ...

  6. nuxt二级路由

    耗费了大半天的时间,终于把页面的二级路由配置好了 先看我的目录 如果没有登陆页,根本就不用考虑嵌套路由的问题,主要的menu跳转和<nuxt />可以直接写到layouts/default ...

  7. vue-router2.0二级路由的简单使用

    1.app.vue中 <template> <div id="app"> <router-view></router-view> & ...

  8. 链接进入react二级路由,引发的子组件二次挂载

    这个问题很怪,我两个二级路由从链接进入的时候,会挂载两次子组件. 从链接进入,是因为新页面在新标签页打开的. 有子组件是因为公共组件提取 同样的操作,有一些简单的二级路由页面,就不会挂载两次. 讲道理 ...

  9. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

随机推荐

  1. COGS 615. 韩国明星

    [问题描述] 在LazyCat同学的影响下,Roby同学开始听韩国的音乐,并且越来越喜欢H.o.T,尤其喜欢安七炫和Tony,可是,爱学习爱思考的Roby同学想,如果以后喜欢的韩星越来越多怎么办呢?R ...

  2. codevs 3129 奶牛代理商IX

    时间限制: 1 s  空间限制: 32000 KB  题目等级 : 白银 Silver 题目描述 Description 小X从美国回来后,成为了USACO中国区的奶牛销售代理商,专门出售质优价廉的“ ...

  3. Django添加tinyMCE编辑器

    tinymce的使用方法很简单,只需要在html页面中包含如下: <!-- Place inside the <head> of your HTML --> <scrip ...

  4. WPF中做出一个QQ登陆界面

    Xaml: <Window x:Class="ChatSoftware.MainWindow" xmlns="http://schemas.microsoft.co ...

  5. int型除以int型

    int型除以int型得到的还是int型 就算你是这样的:float a = 5/3,虽然你定义的a是float型,但a得到的结果依旧是1.0000而不是1.66666 5/3先得到1,然后再转换成1. ...

  6. LeetCode 三角形最小路径和

    给定一个三角形,找出自顶向下的最小路径和.每一步只能移动到下一行中相邻的结点上. 例如,给定三角形: [ [2], [3,4], [6,5,7], [4,1,8,3] ] 自顶向下的最小路径和为 11 ...

  7. react 组件架构

    容器型组件(container component) 含有抽象数据而没有业务逻辑的组件 负责管理数据和业务逻辑,不负责 UI 的呈现 带有内部状态 展示型组件(presentational compo ...

  8. python 学习总结5

    字符串类型及操作 一.字符串类型的表示 (1)字符串:由0个或多个字符组成的有序字符序列  例如:“请输入带有符号的温度值” 或者‘c’都是字符串 (2)字符串是字符的有序序列,可以对其中的字符进行索 ...

  9. ACM训练联盟周赛 Teemo's formula

    Teemo has a formula and he want to calculate it quickly. The formula is . As the result may be very ...

  10. JavaScript正则表达式-字符类

    字符列表 在方括号内指定一个或者多个字符组成的字符列表,与字符列表中任意字符匹配,都被认为是匹配的.每次匹配只能匹配列表中的一个字符. str = "bird,head,fed,meadow ...