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.push({
  name:"路有名称",
  params:{
    "属性名称":{
      
    }
  }
})

path+query

this.$router.history.push({
	path:"/路径",
	query:{
		"属性名称":"值"
	}
})

this.$router.history.push({
	name:"路有名称",
	query:{
		"属性名称":"值"
	}
})

router-link

<router-link :to={name:"路有名称",params:{"属性名称"："属性值"}}></router-link>

动态路径参数

首先在路由配置文件中，修改路径，增加通配符

    const routes = [
      {
        // 动态路径参数 以冒号开头
        path:"/details/:参数名称"
      }
    ]

<router-link :to="`/details/${参数的值}`"></router-lin>

获取路由传递数据

name+params

this.$route.query.属性名称

to={}

this.$route.query.属性名称

to+动态路径参数

this.$route.query.属性名称

路由元数据

可以在定义组件路由时，给每一个路由对象添加一些额外的属性

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta:{
      isShowTabbar:true
    }
  },
  {
    path:"/category",
    name:"Category",
    component: Category,
    meta:{
      isShowTabbar:true
    }
  },
  {
    path:"/cart",
    name:"Cart",
    component: Cart,
    meta:{
      isShowTabbar:true
    }
  },
  {
    path:"/mine",
    name:"Mine",
    component: Mine,
    meta:{
      isShowTabbar:true
    }
  },
  {
    path:"/details",
    name:"Details",
    component:()=>import("../views/Details.vue"),
    meta:{
      isShowTabbar:false
    }
  }
]

可以通过组件的this.$route对象去获取

this.$route.meta.属性名称

嵌套路由

应用场景：

不常变化的业务场景使用，用于切换当前页面变化的部分

配置路由

哪个页面有嵌套路有，就在那个页面的路有对象中添加childred属性

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

命名视图

假如整个项目大多数页面都有一个公共的组件，常规做法就是将这个公共组件引入到需要展示他的组件内，然后使用，频繁的引入并不是最好的处理方式，可以使用命名视图来进行处理

在组件中添加命名的router-view

<router-view name="header"></router-view>

在路由中配置

 {
    path:"/content",
    name:"Content",
    component:()=>import("../views/Content.vue"),
    children:[
      {
        path:"/content",
        components:{
          header:Header,
          // slider:Slider,
          // content:Content,
          // default:Slider
        }
      }
    ]
  }