VueRouter的使用

一、VueRouter的基本概念

文档

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

vue-router地址

1.2 路由组件

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

1.3 路由配置

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

1.4 路由对象

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

1.5 视图

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>

三、VueCli使用VueRouter

3.1 自己配置（建议直接安装【见第四章】）

像之前一样正常创建项目，创建出来一个基本的vue项目

步骤1、在src中创建router、views文件夹

步骤2、 在router文件夹中创建index.js

这个index.js需要导出new VueRouter

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

// 在这里引入路由组件

Vue.use(VueRouter)

const routes = [
  // 在这里配置路由
]

const router = new VueRouter({
  routes
})

export default router

步骤3、 在main.js中引入router对象

import Vue from 'vue'
import App from './App.vue'

import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

步骤4、 到App.vue添加router-view组件

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

<script>

export default {
  name: 'App',
  components: {

  }
}
</script>

<style>

</style>

3.2 直接安装

步骤1 在命令行创建项目

步骤2 选择最后一个

步骤3 选择Router，取消Linter（倒数第三个）

步骤4 按回车

选择vue版本

是否使用history模式，建议用n

剩下内容全部回车即可开始安装

步骤5 项目创建成功

四、VueCli创建出来的项目中结构变化

• router中写的是所有的路由配置
• views是所有的路由组件（在路由中使用的组件）