Vue路由的配置

第一步：在Vue中文官网中找到vue Router，如图，并点击Get Started

 第二步：在该文件夹目录右键打开终端，输入npm install vue-router

 

 出现以下图即安装成功

会在package.json文件中看到红框中内容

把路由引进来,在main.vue中进行编辑

 第三步：在main.vue中引入使用路由的文件并进行以下配置

1.引入要使用理由的文件，import后的命名需与component:后的文件名一致(命名可自定义)

2.在const routes中放置每个引用使用路由文件的path和component，path的命名自定义但记得加/

3、4. 添加该行内容，

 

 第四步：在要使用路由文件中添加该行

  <router-view></router-view>

 第五步：在浏览器中测试，在端口后加#/加path的命名

把路由抽出来 

第一步：新建文件夹里面放router.js

第二步：把在main.js引入路由的代码放到router.js中

第三步：输入这一句

 

二层路由，给路由中放路由（俗称：套娃）

第一步：把要放的路由的path放到一层路由的children中，path中/try2前要加一层路由的路劲

 第二步：添加<router-view></router-view>即引入成功

 第三步：运行测试。输入二层路由中的path