Vue中的router-view解释

最新推荐文章于 2024-08-17 22:36:14 发布

Kimser

最新推荐文章于 2024-08-17 22:36:14 发布

阅读量1.6k

点赞数

原文链接：https://blog.csdn.net/xxtnt/article/details/96281345

版权

本文深入解析Vue.js中的路由机制，从创建组件到命名路由，详细介绍了如何使用Vue Router进行页面导航和视图管理。通过示例代码，展示了不同路由配置下的组件加载方式，包括默认视图和命名视图的应用，以及嵌套路由的实现。

摘要由CSDN通过智能技术生成

在我们创建项目的时候，可以自然而然的发现，那就是在app.vue这个页面里面存在一个<router-view>的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: '<div>This is Home</div>' }
const Foo = { template: '<div>This is Foo</div>' }
const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' }
 
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: `
    <div id="app">
      <h1>Named Routes</h1>
      <p>Current route name: {{ $route.name }}</p>
      <ul>
        <li><router-link :to="{ name: 'home' }">home</router-link></li>
        <li><router-link :to="{ name: 'foo' }">foo</router-link></li>
        <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')

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

<router-view class="view one"></router-view>
 
<router-view class="view two" name="a"></router-view>
 
<router-view class="view three" name="b"></router-view>

没有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的<template>部分设置如下：

<!-- UserSettings.vue -->
 
<div>
 
  <h1>User Settings</h1>
 
  <NavBar/>
 
  <router-view/>
 
  <router-view name="helper"/>
 
</div>