Vue路由(router)的安装与引入

安装

（一）创建Vue项目时安装

// 在终端中创建Vue项目
vue create xxxx (文件名)

在之后出现的选择菜单中自定义安装，选择 router 进行安装：

（二）在终端中安装

// 在终端中输入
npm install vue-router --save

---

引入

在 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')

在 src 文件夹中的 router 文件夹下的 index.js 文件中配置路由信息

---

1.Vue作为一个单页面应用路由一般分为，路由组件与一般组件，路由组件一般放在 pages 文件夹中，一般组件通常放在 components 文件夹中
2.每个组件都有自己的 $route 属性，里面存储着自己的路由信息，可以通过组件的 this.route 属性获取到，但是整个项目只有一个 router 属性，可以通过组件的 this.router 属性获取到
3.每个组件的 $route 属性并不相同，但是每个组件的 $router 属性是相同的

this.route中，route前有 $ 符号
this.router 中，router 前有 $ 符号