vue路由嵌套

责编:menVScode 2017-12-01 17:10 阅读(860)

App.vue

<template>
  <div id="app">
    <div class="nav-box">
      <ul class="f-cb">
        <li>
          <router-link to="/" exact tag="div"  event="mouseover">home</router-link>
        </li>
        <li>
          <router-link :to="{path:'/document'}" event="mouseover">document</router-link>
        </li>
        <router-link to="/about" tag="li" event="mouseover">
          <i></i>
          <span>about</span>
        </router-link>
      </ul>
    </div>
    <router-view class="center"></router-view>
  </div>
</template>

About.vue:该组件内也需要写<router-view></router-view>

<template>
    <div>
        我是about
        <hr>
        <ul class="subnave f-cb">
            <router-link to='/about/study' tag="li">
                <a>study</a>
            </router-link>
            <router-link to='/about/work' tag="li">
                <a>work</a>
            </router-link>
            <router-link to='/about/hobby' tag="li">
                <a>hobby</a>
            </router-link>
            <!-- a标签中href属性不需要写地址,页面编译完成后自动会在href中加入对应的路劲 -->
        </ul>
        <router-view></router-view>
    </div>
</template>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Home from '@/components/Home'
import About from '@/components/About'
import Document from '@/components/Document'
import Study from '@/views/Study'
import Work from '@/views/Work'
import Hobby from '@/views/Hobby'

let router = new VueRouter({
  mode:'history',//默认是hash模式
  linkActiveClass:'menvscode-active',
  routes:[
    {
      path:'/',
      component:Home,
    },
    {
      path:'/home',
      name:'Home',//name代表当前的路由
      component:Home,
      alias:'/index' //当访问'/index'的时候,就能匹配到当前的路由了。
    },
    {
      path:'/about',
      name:'About',
      component:About,
      children:[
        {
          path:'study',//study前面不需要再写“/”
          component:Study
        },
        {
          path:'work',
          component:Work
        },
        {
          path:'hobby',
          component:Hobby
        }
      ]
    },
    {
      path:'/document',
      name:'Document',
      component:Document
    },
    {
      path:'*',
      //重定向
      redirect:(to)=>{
        console.log(to) //目标路由对象,就是访问路劲的路由信息
        if(to.path==='/123'){
          return './home'
        }else if(to.path==='/456'){
          return {path:'/Document'}
        }else{
          return {name:'About'}
        }
      }
    }
  ]
})

export default router

效果如下,但是点击about的时候,二级导航下没有内容渲染,现在需要有默认一个子路由内容被渲染。代码如下修改:

GIF6666

router/index.js

....
{
      path:'/about',
      name:'About',
      component:About,
      children:[
        {
          path:'',//写''空值,代表默认子路由,相对于“/about”
          component:Study,
        },
        {
          path:'work',
          component:Work
        },
        {
          path:'hobby',
          component:Hobby
        }
      ]
}
....

About.vue

<template>
    <div>
        我是about
        <hr>
        <ul class="subnave f-cb">
            <!-- 添加exact精准匹配  -->
            <router-link to='/about' exact tag="li">
                <a>study</a>
            </router-link>
            ...
            <!-- a标签中href属性不需要写地址,页面编译完成后自动会在href中加入对应的路劲 -->
        </ul>
        <router-view></router-view>
    </div>
</template>

设置完成,就能按要求显示,但是控制台会有一个提示。

QQ截图20171201171824

大致意思是如果使用了默认的子路由,那么在父路由中就不要再设置name属性了。

....
{
      path:'/about',
      component:About,
      children:[
        {
          path:'',//写''空值,代表默认子路由,相对于“/about”
          name:'About',
          component:Study,
        },
        {
          path:'work',
          name:'work',
          component:Work
        },
        {
          path:'hobby',
          name:'Hobby',
          component:Hobby
        }
      ]
}
....

////////////////////////////////////////

路由配置中的name还有其他作用:下方绑定路劲的是嵌套的关系,若路劲很长的话就要写很多嵌套,改动的时候特别麻烦,不够灵活,这时候可以利用路由中name属性。

About.vue

<template>
    <div>
        我是about
        <hr>
        <ul class="subnave f-cb">
            <router-link to='/about' exact tag="li">
                <a>study</a>
            </router-link>
            <router-link to='/about/work' tag="li">
                <a>work</a>
            </router-link>
            <router-link to='/about/hobby' tag="li">
                <a>hobby</a>
            </router-link>
            <!-- a标签中href属性不需要写地址,页面编译完成后自动会在href中加入对应的路劲 -->
        </ul>
        <router-view></router-view>
    </div>
</template>

可将About.vue进行如下修改:不用to去绑定目标路由,用 :to='{name:" "}'

<template>
    <div>
        我是about
        <hr>
        <ul class="subnave f-cb">
            <!-- a标签中href属性不需要写地址,页面编译完成后自动会在href中加入对应的路劲 -->
            <router-link :to='{name:"About"}' exact tag="li">
                <a>study</a>
            </router-link>
            <router-link :to='{name:"Work"}' tag="li">
                <a>work</a>
            </router-link>
            <router-link :to='{name:"Hobby"}' tag="li">
                <a>hobby</a>
            </router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

router/index.js

let router = new VueRouter({
  mode:'history',//默认是hash模式
  linkActiveClass:'menvscode-active',
  routes:[
    {
      path:'/',
      component:Home,
    },
    {
      path:'/home',
      name:'Home',//name代表当前的路由
      component:Home,
      alias:'/index' //当访问'/index'的时候,就能匹配到当前的路由了。
    },
    {
      path:'/about',
      component:About,
      children:[
        {
          path:'',//写''空值,代表默认子路由,相当于“/about”
          name:'About',
          component:Study,

        },
        { path:'work', name:'Work', component:Work }, // 相当于 /about/work
        { path:'hobby', name:'Hobby', component:Hobby } // 相当于 /about/hobby
      ]
    },
    { path:'/document',name:'Document',component:Document },
    {
      path:'*',
      //component:Noweb
      //重定向
      //redirect:{path:'/home'}
      //redirect:{name:'Home'}
      redirect:(to)=>{
        console.log(to) //目标路由对象,就是访问路劲的路由信息
        if(to.path==='/123'){
          return './home'
        }else if(to.path==='/456'){
          return {path:'/Document'}
        }else{
          return {name:'About'}
        }
      }
    }
  ]
})

export default router

上面代码执行的时候,路劲是这样的:http://localhost:8080/about/hobbyhttp://localhost:8080/about/work。现在要求路劲这么显示:http://localhost:8080/hobbyhttp://localhost:8080/work。要将路由进行如下设置:

....
{
      path:'/about',
      component:About,
      children:[
        {
          path:'',//写''空值,代表默认子路由,相对于“/about”
          name:'About',
          component:Study,

        },
        {
          path:'/work',
          name:'Work',
          component:Work
        },
        {
          path:'/hobby',
          name:'Hobby',
          component:Hobby
        }
      ]
    },
...
标签: 路由 vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码