vue 路由的作用,视图渲染

视图渲染

路由出了页面跳转这个功能以外,还有一个功能,那就是视图渲染。

简单点说,就是在页面加载的时候,通过配置好的路由路径,将对应好的模块渲染到页面。

我们通过router-view标签,来指定渲染的位置。

举例说明。

在router目录下的index.js文件配置路由。

// 导入模块
import apple from '@/components/apple'

// 配置路由
export default new Router({
  routes: [{
    path: '/',
    name: 'apple',
    component: apple
  }]
})

在App.vue文件中,加入以下内容。

<template>
  <div >
    <router-view/>
  </div>
</template>

浏览器输入地址http://localhost:3000/#/,此时,apple模块的内容就会被渲染在页面上。

当然,也不是说只能在加载页面的时候渲染,加载页面的时候只是一个触发条件,我也可以换一个触发条件来渲染页面,仅仅只是给它一个触发的条件。

最常见的就是点击某个按钮、或a标签来触发路由渲染。

我们举例说明。

在router目录下的index.js文件配置路由。

// 导入模块
import apple from '@/components/apple'
import banana from '@/components/banana'

// 配置路由
export default new Router({
  routes: [{
    path: '/apple',
    name: 'apple',
    component: apple
  }, {
    path: '/banana',
    name: 'banana',
    component: banana
  }]
})

在App.vue文件中,加入以下内容

<template>
  <div >
    <div>
      <router-link :to="{path:'/apple'}">苹果</router-link>
      <router-link :to="{path:'/banana'}">香蕉</router-link>
    </div>
    <router-view/>
  </div>
</template>

路由渲染和组件渲染的区别:

由上面例子,我们可以得出结论,路由渲染需要触发条件,而普通的组件渲染则不需要触发条件,你只要通过标签指定渲染的位置,那么该组件一定会被渲染出来。