VueRouter的基本概念

VueRouter的基本概念

文档

如果我们想要使用路由，则需要引入vue-router.js

vue-router地址

路由组件

路由组件在创建时，和普通组件一样，只是在使用时不同，路由组件需要被放在路由配置中(routes)

路由配置

我们如果想要让我们的网页在访问不同地址显示不同的内容，则需要使用路由配置去配置对应的路由

路由对象

我们通过new VueRouter可以创建出来一个router对象，我们称其为路由对象，路由对象中可以实现相关的路由跳转

视图

router-view 是一个组件的名字，未来 url 匹配到对应的 path 时，对应的 component 就会被渲染到 <router-view></router-view> 标签中

VueRouter的基本配置

<div id="app">
  <router-view></router-view>
</div>

<script>
  /* 
    后续如果要添加新的路由，则重复
      - 创建路由组件
      - 配置路由
  */

  // 创建路由组件
  const Page = {
    template: `
      <div>组件结构</div>
    `
  }

  // 创建路由配置
  const routes = [
    {
      path: "/page",
      component: Page
    }
  ]

  // 创建路由对象
  const router = new VueRouter({
    // 左边必须叫routes，右边可以随意（要和上一步的路由配置名相同）
    routes: routes
  })

  // 把router放在new Vue中
  const app = new Vue({
    el: "#app",
    // 当我们把router写进入new Vue后， this.$router将会获取到router对象
    router
  })
</script>