Vue路由切换

1. 相关API说明

VueRouter(): 用于创建路由器的构建函数

new VueRouter({
  // 多个配置项
})

路由配置

routes: [
  { // 一般路由
    path: '/about',
    component: about
  },
  { // 自动跳转路由
    path: '/', 
    redirect: '/about'
  }
]

组件:

1. router-link: 用来生成路由链接
<router-link to="/xxx">Go to XXX</router-link>
2. <router-view>: 用来显示当前路由组件界面
<router-view></router-view>

3. 实现简单路由

路由组件:

home.vue
about.vue

应用组件: App.vue

<div>
  <!--路由链接-->
  <router-link to="/about">About</router-link>
  <router-link to="/home">Home</router-link>
  <!--用于渲染当前路由组件-->
  <router-view></router-view>  
</div>

入口js: main.js

// 创建路由器(配置路由)
new VueRouter({
  routes: [
    {
      path: '/',
      redirect: '/about'
    },
    {
      path: '/about',
      component: about
    },
    {
      path: '/home',
      component: home
    }
  ]
})
  
// 创建vue配置路由器
new Vue({
  el: '#app',
  router,
  render: h => h(app)
})

优化路由器配置

linkActiveClass: 'active', // 指定选中的路由链接的class
mode: 'history',  // 路由路径不带#

4. 嵌套路由

配置嵌套路由

path: '/home',
component: home,
children: [
  {
    path: 'news',
    component: news
  },
  {
    path: 'message',
    component: message
  }
]

路由路径

<router-link to="/home/news">News</router-link>
<router-link to="/home/message">Message</router-link>

5. 向路由组件传递数据

路由路径携带参数

1.配置路由
  children: [
    {
      path: 'mdetail/:id',
      component: messageDetail
    }
  ]
2.路由路径
  <router-link :to="'/home/message/mdetail/'+m.id">{{m.title}}</router-link>
3.路由组件中读取请求参数
  this.$route.params.id

属性携带数据

<router-view :msg="msg"></router-view>

6. 其它重要

使用缓存路由组件

<keep-alive>
  <router-view></router-view>
</keep-alive>

路由

1. 分类

后台路由
前台路由

2. 是什么

就是一个映射关系(key:value)
后台路由: path: callback
前台路由: path: component