vue之二级路由
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之二级路由的更多相关文章
- vue二级路由跳转后外部引入js失效问题解决方案
vue路由可以通过children嵌套,于是可以形成二级路由等等... 案例如下: routes: [ { path: '/', name: 'dy', component: dy, children ...
- Vue 中的Vue Router一级路由,二级路由,三级路由以及跳转
今天编写了一下Vue中的路由 先用命令行新建一个空的项目,并且我知道要用路由,就下载了路由的相关依赖 vue init webpack demo5 完毕之后进入所在的项目 cd demo5 之后用vs ...
- 每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)
路由别名 在main.js中的路由中添加name来创建别名 const routes = [ {path:'/footer',name:footerLink,component:Footer} ] ...
- vue 路由知识点(一级路由与二级路由嵌套)
本人小白一个,如果问题,麻烦大神指点, 一级路由: path:'/' 默认为显示; 二级路由: path: '',默认显示为index组件,因为二级路有没有写index组件,所以使用redirect: ...
- vue-router 二级路由
/** * Created by 我 on 2017/12/4. */ import Vue from 'vue' //import导入 Vue(自己起的名) from 从 vue import Vu ...
- nuxt二级路由
耗费了大半天的时间,终于把页面的二级路由配置好了 先看我的目录 如果没有登陆页,根本就不用考虑嵌套路由的问题,主要的menu跳转和<nuxt />可以直接写到layouts/default ...
- vue-router2.0二级路由的简单使用
1.app.vue中 <template> <div id="app"> <router-view></router-view> & ...
- 链接进入react二级路由,引发的子组件二次挂载
这个问题很怪,我两个二级路由从链接进入的时候,会挂载两次子组件. 从链接进入,是因为新页面在新标签页打开的. 有子组件是因为公共组件提取 同样的操作,有一些简单的二级路由页面,就不会挂载两次. 讲道理 ...
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
随机推荐
- 删除.cpp文件
今天启动vc6.0后随手直接建了一个.cpp文件(没有建什么工程的),编译运行成功后,就把vc关了.后想把这个随手建的文件给删掉,却怎么也找不到这个文件,文件搜索或改变文件的属性也无法找到这个文件,即 ...
- 纪念一下我的第一个php扩展
C扩展代码 生成 so扩展文件( 很多文章介绍 生成so时候 喜欢用 # phpize ./configure ...... 刚开始掉进坑里面出不来 就是因为把这两个命令看成了一个 phpize ./ ...
- SAP云平台,区块链,超级账本和智能合约
前一篇文章<Hyperledger Fabric on SAP Cloud Platform>,我的同事Aviva已经给大家介绍了基于区块链技术的超级账本(Hyperledger)的一些概 ...
- iOS(iPhone,iPad))开发(Objective-C)开发库常用库索引
http://www.code4app.com 这网站不错,收集各种 iOS App 开发可以用到的代码示例 http://www.cocoacontrols.com/ 英文版本的lib收集 ht ...
- chrom浏览器-F2使用方法一
由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿! 首先介绍Chrome开发者工具中,调试时使用最多 ...
- python Object-Oriented Programming
Python 类的成员.成员修饰符.类的特殊成员. Python 类的成员 类的成员可以分为三大类: 字段.方法和属性. #注:所有成员中,只有普通字段的内容保存对象中,即: #根据此类创建了多少对象 ...
- Vue的安装并在WebStorm中运行
一.Vue的安装需要两个支持分别为:nodejs.npm Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O ...
- VIM C语言函数名高亮
VIM默认情况下,函数名是不会高亮的,将下面这段代码添加到/usr/share/vim/vim73/syntax/c.vim文件的末尾即可: "highlight Functions s ...
- Java中的线程--线程中的工具
这主要想写一下Java中的jdk提供的一些线程中的工具, 一.semaphore信号灯 Semaphore可以维护当前访问自身的线程个数,并提供了同步机制,使用Semaphore可以控制同时访问资源的 ...
- tp5对接支付宝支付简单集成
对于每个刚开始工作的新手来说,无论支付宝支付还是微信支付都是跑不掉的一个小门槛. 在加上本人比较技术比较渣(比较懒导致的),不太喜欢引用那么大的SDK,于是就简单集成了一下支付宝的支付. 但也只是只有 ...