前沿

• 虽然vue路由并不复杂，但是在使用时，总是有种晦涩的感觉，没有那种信手拈来的流畅感，每次想使用时，都需要查找一下资料，故此：对整个路由做了一个总结，希望能给大家带来帮助，如有错误处，也请指出，万分感谢！

创建路由组件

import Vue from 'vue'
import Router from 'vue-router'

const router = new Router({
  mode: 'history',
  base: '/项目名称',
  routes: [{
    path: '/',
    redirect: '/login',
  },
  {
    path: '/home',
    name: 'home',
    redirect: 'home/homePage',
    component: () => import('@/pages/Home.vue'),
    children: [HomePage,
  }],
})

export default router

• 这是一个最基本的路由，可能大家对这个路由中的使用方式比较困惑，为什么导入组件的方式与大家平常使用的方式不太一样？这主要是因为笔者现在使用的时vue-cli3.x版本的，这种引入路由得方式是vue-cli 3.x版本后集成得。

将创建得路由注入Vue实例中

import Vue from 'vue'
import App from '@/App.vue'
import router from '@/router'


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

• 当我们将router组件注入Vue实例后，我们就可以在vue项目中使用路由了，此时我们得项目才算是有了灵魂。

使用路由

在template中使用

• vue给我们提供了两个组件，router-view和router-link,它们分别有什么作用呢？

• router-view

  • 我们都知道vue是更多的是做单页面应用，同时，在开发的过程中，更推荐我们使用组件化的开发模式，这样做是为了增加代码的可维护性。这些其实都离不开路由的帮助，其中绕不开的就是此时的主角router-view;
  • 它的作用就是在页面的空白处留一个插槽，然后将根据不同的路径去展示不同的页面；
  • 一个很好理解的使用场景，就是后台管理系统中，当左侧是一排菜单栏时，右侧要对应展示不同菜单对应的页面，此时，我们就可以在右侧留一个插槽router-view,根据不同的菜单，去展示不同的内容，这个应该是前端使用最频繁的场景。

• router-link

  • 这个就更好理解了，我们可以把它理解成html中的a标签，其实它也就是vue中a标签的替代品;
  • 它有一个必填项，to,作为router-link的必填属性，它对应着路由组件中的路径；

在script中使用

• 在项目中，我们很多时候都需要点击事件中去跳转页面，说到这个里，我们就不得不说一下路由的传值方式，
• 他们都使用的this.$router.push()的方式去跳转页面，不同的是传值方式的不同；

总结一下可以有三种传值方式，两个注意点

• 第一种方式直接调用$router.push 实现携带参数的跳转，参数直接显示在url上；

// 事件中使用
  this.$router.push({
    path: `/detail/${id}`,
  })

// 对应匹配的路由
{
  path: '/detail/:id',
  name: 'Detail',
  component: Detail
}

// 显示的url
http://www.xxxx.com/detail/10000

• 注意：

  • 这种传参的方式显然不太正规，一般只用来匹配特殊的路由，没办法传更多的数据；
  • 同时在页面获取数据的时候，是this.$route.params.id,千万注意，是route,不是router。

• 第二种方式是通过路由属性中的name来确定匹配的路由，通过params来传递参数；

this.$router.push({
  name: 'Detail',
  params: {
    id: id
  }
})

• 注意使用这种方式去传参时，不能用:/id去参数了。

• 第三种方式是使用path来匹配路由，然后通过query来传递参数;

// js
this.$router.push({
  path: '/detail',
  query: {
    id: id
  }
})
// 路由匹配
{
  path: '/detail',
  name: 'Detail',
  component: Detail
}
// 效果
http://www.xxxx.com/detail?id=10000

• 这样的方式来获取参数this.$route.query.id