Vue2.x路由vue-router

# vue-router的基本使用

1. 什么是vue-router

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA（单页面应用程序）项目中组件的切换。

2. vue-router安装和配置步骤

① 安装 vue-router 包
② 创建路由模块
③ 导入并挂载路由模块
④ 声明路由链接和占位符

2.1 在Vue2项目中安装 vue-router

npm i vue-router@指定版本 -S

2.2 创建路由模块

在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码:

查看代码

// src/router/index.js 就是当前项目的路由模块

// 1. 导入 Vue 和VueRouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2. 把 VueRouter 安装为 Vue 项目的插件
// Vue.use() 函数的作用，就是来安装插件的
Vue.use(VueRouter)

// 3. 创建路由的实例对象
const router = new VueRouter( )

// 4. 向外共享路由实例对象
export default router

2.3 导入并挂载路由模块

在 src/main.js 入口文件中，导入并挂载router/index.js路由模块，如下：

查看代码

import Vue from 'vue'
import App from './App.vue'
// 1. 导入路由模块，目的：拿到路由的实例对象
// 在模块化导入的时候，如果给定的是文件夹，则默认导入这个文件夹下的 index.js
import router from '@/router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 2. 把路由实例对象进行挂载
  // router: 路由的实例对象
  // router：router ES6简写 router
  router
}).$mount('#app')

2.4 声明路由链接和占位符

在 src/App.vue 组件中，使用 vue-router 提供的 <router-link> 和 <router-view> 声明路由链接和占位符:

查看代码

<template>
  <div class="app-container">
    <!-- 当安装和配置了 vue-router 后，就可以使用 router-link 来替代普通的 a 链接了 -->
    <!-- <a href="#/home">首页</a> -->
    <router-link to="/home">首页</router-link>
    <router-link to="/movie">电影</router-link>
    <router-link to="/about">关于</router-link>

    <!-- 只要在项目中安装和配置了 vue-router，就可以使用 router-view 这个组件了 -->
    <!-- 它的作用很单纯：占位符 -->
    <router-view></router-view>
  </div>
</template>

3. 声明路由的匹配规则

在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则。示例代码如下:

查看代码

// 1. 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

// 2. 在路由的实例对象中声明路由规则
const router = new VueRouter({
  // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系
  routes: [
    // 路由规则
    { path: '/home', component: Home },
    { path: '/movie', component: Movie },
    { path: '/about', component: About }
  ]
})

# vue-router的常见使用

1. 路由的重定向

路由重定向指的是:用户在访问地址 A 的时候，强制用户跳转到地址 B ，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向:

查看代码

// src/router/index.js文件
const router = new VueRouter({
  routes: [
    // 重定向的路由规则，当用户访问 / 的时候，自动编程访问 /home
    { path: '/', redirect: '/home' },
    { path: '/home', component: Home },
    { path: '/movie, component: Movie },
    { path: '/about',component: About, }
  ]
})

2. 嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由。

2.1 声明子路由链接和子路由占位符

比如，在 About.vue 组件中，声明 tab1 和 tab2 的子路由链接以及子路由占位符。如下:

查看代码

<template>
  <div class="about-container">
    <!-- 在关于页面中，声明两个子级路由链接 -->
    <router-link to="/about">tab1</router-link> //使用默认路由
    <router-link to="/about/tab2">tab2</router-link>

    <!-- 在关于页面中，声明子级路由占位符 -->
    <router-view></router-view>
  </div>
</template>

2.2 通过 children 属性声明子路由规则

在 src/router/index.js 路由模块中，导入需要的组件，并使用 children 属性声明子路由规则:

查看代码

// src/router/index.js文件
const router = new VueRouter({
  routes: [
      path: '/about',
      component: About,
      // 子路由规则
      children: [
        // 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”
        { path: '', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
  ]
})

3. 动态路由匹配

3.1 动态路由概念

动态路由指的是:把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。在 vue-router 中使用英文的冒号( : )来定义路由的参数项。示例代码如下:

查看代码

// src/router/index.js文件
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    // 需求：在 Movie 组件中，希望根据 id 的值，展示对应电影的详情信息
    // 开启 props: true 选项，可以为路由规则开启 props 传参，从而方便的拿到动态参数的值
    { path: '/movie/:mid', component: Movie, props: true },
  ]
})


// src/components/Movie.vue文件
<template>
  <div class="movie-container">
    <!-- 方式1：通过 this.$route.params.mid 获得路由动态参数 是路由的“参数对象” -->
    <!-- this.$route 是路由的“参数对象” -->
    <h3>Movie 组件 --- {{ $route.params.mid }} --- {{ mid }}</h3>
  </div>
</template>

<script>
export default {
  name: 'Movie',
  // 方式2：路由匹配规则中开启了props: true 选项通过接收 props 数据
  props: ['mid']
}
</script>

4. 声明式导航&编程式导航

浏览器中，点击链接实现导航的方式，叫做声明式导航。例如:

普通网页中点击 <a> 链接、vue 项目中点击 <router-link> 都属于声明式导航

在浏览器中，调用 API 方法实现导航的方式，叫做编程式导航。例如:

普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航

3.1 vue-router 中的编程式导航 API

vue-router 提供了许多编程式导航的 API，其中最常用的导航 API 分别是:

① this.$router.push('hash 地址')

跳转到指定 hash 地址，有历史记录

② this.$router.replace('hash 地址')

跳转到指定的hash地址，没有历史记录

③ this.$router.go(数值 n)

实现导航历史前进、后退

查看代码

// src/components/Movie.vue文件
<template>
  <div class="home-container">
    <!-- 在行内使用编程式导航跳转的时候，this 必须要省略，否则会报错！ -->
    <button @click="$router.push('/movie/1')">通过 push 跳转到“1”页面</button>
    <button @click="$router.replace('/movie/2')">通过 replace 跳转到“2”页面</button>
    <button @click="$router.go(-1）>通过go 后退
  </div>
</template>

// $router.go 有简化用法
$router.back() 在历史记录中，后退到上一个页面
$router.forward() 在历史记录中，前进到下一个页面
<template>
  <div class="home-container">
    <!-- 在行内使用编程式导航跳转的时候，this 必须要省略，否则会报错！ -->
    <button @click="$router.back()> 后退 </button>
    <button @click="$router.forward()> 前进 </button>
  </div>
</template>

5. 导航守卫

导航守卫可以控制路由的访问权限。比如用于登录后台，未登录的需要跳转到登录页面。

5.1 全局前置守卫

可以在 src/router/index.js 中设置全局前置守卫。每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制。

全局前置守卫的回调函数中接收3个形参：

查看代码

// 注意：默认情况下，new 出来的 vue-router 是直接暴露出去的
// 设置导航守卫前，需要将 new 出来的 vue-router 用常量 router 或 vueRouter 接收一下，拆分出来，具体看下面例子 
// 而且需要再 new 之后配置全局守卫
router.beforeEach(function(to, from, next) {
  // to 表示将要访问的路由的信息对象
  // from 表示将要离开的路由的信息对象
  // next() 函数表示放行的意思
}

后台登录案例中：

当前用户拥有后台主页的访问权限，直接放行:next()
当前用户没有后台主页的访问权限，强制其跳转到登录页面:next('/login')
当前用户没有后台主页的访问权限，不允许跳转到后台主页:next(false)

查看代码

// 为 router 实例对象，声明全局前置导航守卫
// 只要发生了路由的跳转，必然会触发 beforeEach 指定的 function 回调函数
router.beforeEach(function(to, from, next) {
  // to 表示将要访问的路由的信息对象
  // from 表示将要离开的路由的信息对象
  // next() 函数表示放行的意思
  // 分析：
  // 1. 要拿到用户将要访问的 hash 地址
  // 2. 判断 hash 地址是否等于 /main。
  // 2.1 如果等于 /main，证明需要登录之后，才能访问成功
  // 2.2 如果不等于 /main，则不需要登录，直接放行  next()
  // 3. 如果访问的地址是 /main。则需要读取 localStorage 中的 token 值
  // 3.1 如果有 token，则放行
  // 3.2 如果没有 token，则强制跳转到 /login 登录页
  if (to.path === '/main') {
    // 要访问后台主页，需要判断是否有 token
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      // 没有登录，强制跳转到登录页
      next('/login')
    }
  } else {
    next()
  }
})

# src/router/index.js示例

查看代码


// src/router/index.js 就是当前项目的路由模块
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入需要的组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

import Tab1 from '@/components/tabs/Tab1.vue'
import Tab2 from '@/components/tabs/Tab2.vue'

import Login from '@/components/Login.vue'
import Main from '@/components/Main.vue'

// 把 VueRouter 安装为 Vue 项目的插件
// Vue.use() 函数的作用，就是来安装插件的
Vue.use(VueRouter)

// 创建路由的实例对象
const router = new VueRouter({
  // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系
  routes: [
    // 重定向的路由规则
    { path: '/', redirect: '/home' },
    // 路由规则
    { path: '/home', component: Home },
    // 需求：在 Movie 组件中，希望根据 id 的值，展示对应电影的详情信息
    // 可以为路由规则开启 props 传参，从而方便的拿到动态参数的值
    { path: '/movie/:mid', component: Movie, props: true },
    {
      path: '/about',
      component: About,
      // redirect: '/about/tab1',
      children: [
        // 子路由规则
        // 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”
        { path: '', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    },
    { path: '/login', component: Login },
    { path: '/main', component: Main }
  ]
})

// 为 router 实例对象，声明全局前置导航守卫
// 只要发生了路由的跳转，必然会触发 beforeEach 指定的 function 回调函数
router.beforeEach(function(to, from, next) {
  // to 表示将要访问的路由的信息对象
  // from 表示将要离开的路由的信息对象
  // next() 函数表示放行的意思
  // 分析：
  // 1. 要拿到用户将要访问的 hash 地址
  // 2. 判断 hash 地址是否等于 /main。
  // 2.1 如果等于 /main，证明需要登录之后，才能访问成功
  // 2.2 如果不等于 /main，则不需要登录，直接放行  next()
  // 3. 如果访问的地址是 /main。则需要读取 localStorage 中的 token 值
  // 3.1 如果有 token，则放行
  // 3.2 如果没有 token，则强制跳转到 /login 登录页
  if (to.path === '/main') {
    // 要访问后台主页，需要判断是否有 token
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      // 没有登录，强制跳转到登录页
      next('/login')
    }
  } else {
    next()
  }
})

export default router

posted @ 2022-04-14 17:01 RHCHIK 阅读(408) 评论(0) 编辑收藏举报

刷新页面返回顶部

百索园前端

懂一点代码的程序员

Vue2.x路由vue-router

# vue-router的基本使用

1. 什么是vue-router

2. vue-router安装和配置步骤

2.1 在Vue2项目中安装 vue-router

2.2 创建路由模块

2.3 导入并挂载路由模块

2.4 声明路由链接和占位符

3. 声明路由的匹配规则

# vue-router的常见使用

1. 路由的重定向

2. 嵌套路由

2.1 声明子路由链接和子路由占位符

2.2 通过 children 属性声明子路由规则

3. 动态路由匹配

3.1 动态路由概念

4. 声明式导航&编程式导航

3.1 vue-router 中的编程式导航 API

5. 导航守卫

5.1 全局前置守卫

# src/router/index.js示例