安装


(一)创建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 前有 $ 符号

Logo

前往低代码交流专区

更多推荐