vue 路由的作用，视图渲染

Posted 2021-02-12 heson

视图渲染

路由出了页面跳转这个功能以外，还有一个功能，那就是视图渲染。
简单点说，就是在页面加载的时候，通过配置好的路由路径，将对应好的模块渲染到页面。
我们通过router-view标签，来指定渲染的位置。

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

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

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

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

<template>
  <div id="app">
    <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 id="app">
    <div>
      <router-link :to="{path:'/apple'}">苹果</router-link>
      <router-link :to="{path:'/banana'}">香蕉</router-link>
    </div>
    <router-view/>
  </div>
</template>

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

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