vue-cli(Vue-Router)嵌套路由的使用

6

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有: 嵌套的路由/视图表 模块化的、基于组件的…

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
      },
      ]
    },

作者: huanggr

为您推荐

7

发表评论

电子邮件地址不会被公开。 必填项已用*标注