vue-router的使用步骤

1. 在终端运行npm install vue-router命令
2. 新建components/views文件夹，新建index.js作为配置组件的入口
3. 在index.js中引入VueRouter

import VueRouter from 'vue-router'

1.创建路由规则数组

const routes =[{
    path:'/',
    name:'Home',
    component:'Home'
}]

1.创建路由对象

const router = new VueRouter({
    routes:routes
    //此处的routes是第四步中的routes数组
})

1.将路由对象挂载到Vue实例中，此处代码在main.js中编写

router

• 路由器对象（在控制台中打印），包含一些操作路由的功能函数，来实现编程式导航，一般指的是在任何组件内访问路由，如路由编程式导航的$router.push()
• 一般具有功能性

$router.go()
$router.push({})
$router.replace({})

routes

• 指创建vue-router路由实例的配置项，用来配置多个route路由对象

const routes =[{
    path:'/',
    name:'test',
    age:18
}]
this.name = this.route.params.name
this.age = this.route.params.age

route

• 指路由对象表示当前激活的路由的状态信息，如this.$route指的是当前路由对象
• 一般用于获取信息

路由路径$route.path
路由参数$route.params
路由的查询参数$route.query
路由的hash值$route.hash
当前路径的名字$route.name
路由元信息$route.meta