Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式,在 IE9 中自动降级
自定义的滚动条行为
二级路由的添加
index.js
在about中添加二级路由
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| //二级导航,用到的才可以添加,不用的不能添加
import hobby from '@/views/hobby'
import study from '@/views/study'
import work from '@/views/work'
export default new Router({
// 更改路由模式
mode:"history",
// 点击的每一个都是这个颜色
linkActiveClass:'is-active',
routes: [
{
path: '/about',
name: 'About',
component: About,
children:[
{
path:'study',
component:study
},
{
path:'hobby',
component:hobby
},
{
path:'work',
component:work
},
]
}, |
about.vue中的内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <!-- 这里面的内容需要层层包裹 -->
<template>
<div class="about">
<h1>about</h1>
<router-link to="/about/study" >
<a>study</a>
</router-link>
<router-link to="/about/work" >
<a>work</a>
</router-link>
<router-link to="/about/hobby" >
<a>hobby</a>
</router-link>
<router-view/>
</div>
</template> |
设置二级路由的默认路由
上面的内容表示的是只有当我们具体的访问about下面的路由的时候我们二级目录组件才会被显示,那么我们想当我们访问about的时候,下面的默认的组件就会被渲染,我们怎么去做呢,看如下的步骤:
path为空即可
1 2 3 4 5 6
| children:[
{
path:'', //默认的子路由
component:study
}
] |
exact(精确匹配)
如果有子路由,父路由就最好不好添加name属性,我们可以将about的name属性 (name: 'About',)添加到子路由中的默认路由中,这样就不会警告了
使用别名(name)进行访问
about.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <!-- 这里面的内容需要层层包裹 -->
<template>
<div class="about">
<h1>about</h1>
<router-link :to="{name:'Study'}" >
<a>study</a>
</router-link>
<router-link :to="{name:'Work'}" >
<a>work</a>
</router-link>
<router-link :to="{name:'Hobby'}" >
<a>hobby</a>
</router-link>
<router-view/>
</div>
</template> |
index.js中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| {
path: '/about',
component: About,
children:[
{
path:'',
name: 'About',
component:study
},
{
path:'study',
name: 'Study',
component:study
},
{
path:'hobby',
name: 'Hobby',
component:hobby
},
{
path:'work',
name:'Work',
component:work
},
]
}, |
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"vue-cli(Vue-Router)嵌套路由的使用"
最新评论