Vue中的router-view解释

在我们创建项目的时候，可以自然而然的发现，那就是在app.vue这个页面里面存在一个的tag标签。通过它，我们点击链接，即可显示出Vue的HelloWorld.vue页面。

那么，到底是什么让HelloWorld.vue页面显示出来，并且它的路由途径和特点呢？

下面就一一来解释一下：

       本质，RouterView【命令视图】和RouterLink【命令路线】本身是两个组件。

操作步骤分别为：

1、创建组件

2、命名路由

const router = new VueRouter({

  routes: [

    {

      path: '/user/:userId',

      name: 'user',

      component: User

    }

  ]

})

3、使用

 

完整操作步骤代码如下：

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

Vue.use(VueRouter)

const Home = { template: '
This is Home
' }
const Foo = { template: '
This is Foo
' }
const Bar = { template: '
This is Bar {{ $route.params.id }}
' }

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/foo', name: 'foo', component: Foo },
    { path: '/bar/:id', name: 'bar', component: Bar }
  ]
})

new Vue({
  router,
  template: `
    

      
Named Routes
      
Current route name: {{ $route.name }}
      

        
home
        
foo
        
bar
      
      
    
  `
}).$mount('#app')

 

命令视图：通常用在同时显示多个视图

没有name的视图，将default作为其名称，由于多个视图的性质，因此多个视图需要统一路径的多个组件。

const router = new VueRouter({

  routes: [

    {

      path: '/',

      components: {

        default: Foo,

        a: Bar,

        b: Baz

      }

    }

  ]

})

嵌套命名：不同于非嵌套，它常常用于布局上

针对这种格局，我们通过对路由进行配置来实现上述布局：

{

  path: '/settings',

  // You could also have named views at the top

  component: UserSettings,

  children: [{

    path: 'emails',

    component: UserEmailsSubscriptions

  }, {

    path: 'profile',

    components: {

      default: UserProfile,

      helper: UserProfilePreview

    }

  }]

}

而，其中对settings.profile的