vue路由配置和使用

• 在src/router文件夹下的index.js中进行配置

  
  image.png
• 在main.js中调用index.js的配置：

import router from './router'

• App.vue页面使用（展示）路由：

把这个标签放到对应位置：

<router-view></router-view>

• 路由切换（原来的<a href=”XXX.html”>等地方）：把切换标签和链接改成：

<router-link  to="/">切换到HelloWorld组件</router-link>

当你点击 <router-link> 时，这个方法会在内部调用，但是有时的需求是页面不直接跳转，有确认弹框或者其他事件，此时就需要在js中设置跳转，常用的一种方法是 .$router.push(),该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

页面可以通过 $route.params.xxx 获取上个页面传递过来的数据