vue命名视图(router-view)

责编:menVScode 2017-12-02 9:52 阅读(1562)

命名视图:在同级同时展示多个视图,而不是嵌套展示。

展示多个视图,需要写多个<router-view name=""></router-view>,通过name属性来区分。

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>
    <div>
      <router-view name="slider"></router-view> <!-- 命名视图 -->
      <router-view class="center"></router-view>
    </div>
  </div>
</template>

router/index.js

将Document路由配置中的component改为components,其值是一个对象{ }。有一个默认固定的 default:"默认显示的组件名字",就会渲染到没有name属性的<router-view class=""></router-view>的位置。

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 Noweb from '@/components/404'
import Study from '@/views/Study'
import Work from '@/views/Work'
import Hobby from '@/views/Hobby'
import Slider from '@/views/Slider'

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
        },
        {
          path:'/hobby',
          name:'Hobby',
          component:Hobby
        }
      ]
    },
    {
      path:'/document',
      name:'Document',
      components:{ // 多个视图的时候,默认渲染default的视图。
        default:Document,
        slider:Slider
      }
    },
    {
      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

Document路由配置中的slider,对应着<router-view name="slider"></router-view>的name的值。

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码