vue-router

什么是 vue-router

vue-router 是 Vue.js 官方的路由管理器插件，主要用来辅助构造单页面应用。

vue-router 的原理是什么

• 第一种 H5 的 History API

• 第二种 URL 的 hash属性

安装

NPM

npm install vue-router --save

Vue-Cli

vue add router

核心用法

在根文件夹中创建 router/index.js 文件(个人习惯，项目简单不需要)

• 一：导入并使用该插件

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

Vue.use(Router)

• 二：创建 Router 实例

export default new Router({

})

• 三：导入并使用该插件

在 main.js 中导入路由插件，并在根组件上全局使用。

import router form './router'

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

• 四：页面上显示路由组件

在 App.vue 中添加路由视图

<router-view></router-view>

• 四：配置跳转路径

导入需要显示的页面，在 routes 配置中给某个路由设置路径 名称和对应的页面组件。项目复杂还可以给 routes 对应到具体的模块，最后在统一管理。

import User from '@/pages/user.vue'

const routes = [
  {
    path: '/user',
    name: 'user',
    component: User
    //  直接进行引入也很常用
    //  component: () => import('@/pages/main/main'),
  },
]

export default new VueRouter({
  routes
})

• 五：页面中进行路由跳转

//  在 template 中进行声明式跳转  
<router-link to="/">Home</router-link> 
<router-link to="/about">About</router-link>

在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push

//编程式
this.$router.push('/')
this.$router.push('/about')

• 六：路由组件传参

在路由页面的设置

const routes = [
  {
    path: '/login/:user/:id',
    //  用 params 传参。必须在 path 后加这个参数页面刷新时才不会丢失参数
    name:'user', 
    //  路由跳转页面的名字
    component: _import('user/item'),
    hidden: true
  },

方法一： 利用 query 来传递参数

传递参数到跳转页面

this.$router.push({
  path: "/user",
  query: { itemId: row.itemId },
});

获取之前页面的传过来的参数

//  可以这么写
//this.$router.currentRoute.query.itemId

//  必须用this.$route 来获取参数
this.$route.query.itemId

方法二： 利用 router 的 name 属性（params）来传递参数

因为 params 只能通过 name 来传递路由，所以必须设置 name 属性

//  传递参数到跳转页面
this.$router.push({
  name:"'user'", 
  params:{
    itemId:"5464613213497923149"
  }
})

获取之前页面的传过来的参数

//  必须用this.$route 来获取参数
this.$route.params.itemId

同理也可以用 <router-link> 来进行上面两种参数传递

• 七：全局路由导航

你可以使用 router.beforeEach 注册一个全局前置守卫

router.beforeEach((to, from, next) => {
//  to 是你即将跳转的路由对象
//  from 是你即将离开的路由对象
//  next 决定路由跳转到哪里

  //  开启页面加载
  this.$store.commit.isLoading = true
  //  如果用户未能验证身份，且跳转页面不是登录页面 则跳到登录页
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

你可以使用 router.afterEach 注册一个全局后置守卫

router.afterEach((to, from) => {
  //  关闭页面加载
  this.$store.commit.isLoading = false
})