Vue进阶 (路由基础、路由进阶、获取路由传递数据、路由元数据、嵌套路由、命名视图)

路由基础

安装Vue-router

一 、使用 Vue-cli 安装时，选中集成 Vue-router

二 、使用 npm 安装

npm install vue-router -s

集成

创建vue-router对象

import Home from "./Home.vue"

;//将路径和组件一一对应，每一个配置项就是一条路由
const routes = [
  {
   
    path:"/",
    name:"Home"
    component:Home
  },
  {
   
    
  },
  {
   
    
  }
]

// 新建vue对象，创建参数为对象类型,返回值：rrouter对象，路由管理对象
const router = new VueRouter({
   
  mode:"history"//hash 前端路由和后端路由
  //路由配置列表
  routes
})

main.js

// 在挂载跟组件中，使用路由管理整个项目的组件
// 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能

new Vue({
   
  router,//使整个项目的组件都在vue-router的管理之下
  render: h => h(App)
}).$mount('#app')

路由进阶

$router:路由管理对象

$route：每条路由的对象

push跳转

name+params

this.$router.history.p