目录

前端路由(Hash 地址与组件之间的对应关系)

1.前端路由的工作方式

2.实现简易的前端路由

步骤1:通过 标签,结合 comName 动态渲染组件。

步骤2:在 App.vue 组件中,为 链接添加对应的 hash 值

步骤3:在 created 生命周期函数中,监听浏览器地址栏中 hash 地址的变化,动态切换要展示的组件的名称

vue-router 的基本使用

1.vue-router 安装和配置的步骤

1.1.Vue2 项目 安装 vue-router 包(npm i vue-router@3.5.2 -S)

1.2. 创建路由模块

1.3.导入并挂载路由模块

1.4. 声明路由链接和占位符

1.4.1路由参数对象$route,路由“导航对象”$router,hash地址中的“查询参数”,“路径参数”

1.5.声明路由的匹配规则

2.路由重定向(redirect 属性)

3.嵌套路由

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

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

4. 动态路由匹配

  4.1.访问到动态匹配的参数值

方法一: 通过$route.params 参数对象

方法二:使用 props 接收路由参数

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

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

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

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

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

导航守卫(可以控制路由的访问权限)

6.1 全局前置守卫

6.2.next 函数的 3 种调用方式

7.全局后置守卫

8.独享守卫

9.组件内守卫

路由器的两种工作模式

1.hash模式(默认模式):

2.history模式:

2.1history模式解决服务端404问题(nodejs方法)


前端路由(Hash 地址与组件之间的对应关系)

SPA 指的是 一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。
此时,不同组件之间的切换需要 通过 前端路由来实现。
结论:在 SPA 项目中,不同功能之间的切换,要依赖于 前端路由来完成!

1.前端路由的工作方式

① 用户 点击了页面上的路由链接
② 导致了 URL 地址栏中的 Hash 值发生了变化
③ 前端路由 监听了到 Hash 地址的变化
④ 前端路由把 当前 Hash 地址对应的组件渲染都浏览器中

2.实现简易的前端路由

步骤1:通过 <component> 标签,结合 comName 动态渲染组件。

步骤2:在 App.vue 组件中,为 <a> 链接添加对应的 hash 值

步骤3:在 created 生命周期函数中,监听浏览器地址栏中 hash 地址的变化,动态切换要展示的组件的名称

<template>
  <div class="app-container">
    <h1>App 根组件</h1>

    <a href="#/home">首页</a>
    <a href="#/movie">电影</a>
    <a href="#/about">关于</a>
    <hr />
    <!-- 动态组件 -->
    <component :is="comName"></component>
  </div>
</template>

<script>
// 导入组件
import Home from '@/components/Home.vue'
import Movie from '@/components/Movie.vue'
import About from '@/components/About.vue'

export default {
  name: 'App',
  data () {
    return {
      /* 在动态组件的位置,要展示的组件名字,值必须是字符串 */
      comName: 'Home'
    }
  },
  created () {
    /* 只要当前的App组件一被创建,就立即监听window对象的onhashchange 事件
    这里必须用箭头函数,this指向的和外面的保持一致,
    如果用function则会执行事件监听的对象window */
    window.onhashchange = () => {
      console.log('监听到了hash地址的变化', location.hash)
      switch (location.hash) {
        case '#/home':
          this.comName = 'Home'
          break
        case '#/movie':
          this.comName = 'Movie'
          break
        case '#/about':
          this.comName = 'About'
          break
      }
    }
  },
  // 注册组件
  components: {
    Home,
    Movie,
    About
  }
}
</script>

vue-router 的基本使用

vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目 中组件的切换。
参考vue-router 的官方文档地址:https://router.vuejs.org/zh/

1.vue-router 安装和配置的步骤

1.1.Vue2 项目 安装 vue-router 包(npm i vue-router@3.5.2 -S)

1.2. 创建路由模块

src 源代码目录下,新建 router/index.js 路由模块

// src/router/index.js就是路由模块

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

/* 2.调用Vue.use()函数,把VueRouter安装为Vue的插件 */
Vue.use(VueRouter)

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



/* 4.向外共享router */
export default router

1.3.导入并挂载路由模块

src/main.js 入口文件中,导入并挂载路由模块。

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  /* 在Vue项目中,想要把路由用起来,必须把路由实例对象,进行挂载 */
  /* 属性和属性值一样可以简写 */
  // router: router
  router
}).$mount('#app')

1.4. 声明路由链接和占位符

在 src/App.vue 组件中,使用 vue-router 提供的 <router-link> 和 <router-view> 声明路由链接和占位符
 router-view的作用:占位符
<template>
  <div class="app-container">
    <h1>App2 组件</h1>

    <!-- 当安装和配置了vue-router后可以用router-link来替换普通的a链接 -->
    <!-- <a href="#/home">首页</a> -->
    <!-- <a href="#/movie">电影</a> -->
    <!-- <a href="#/about">关于</a> -->

    <router-link to="/home">首页</router-link>

    <router-link to="/movie/1">洛基</router-link>
    <!-- 注意1:在hash地址中,/后面的参数项,叫做“路径参数”-->
    <!-- 在路由“参数对象this.$route中”,需要使用this.$route.params来访问路径参数 -->

    <!-- 注意2:在hash地址中,?后面的参数项,叫做“查询参数” -->
    <!-- 在路由“参数对象”中,需要使用this.$route.query来访问查询参数 -->

    <!-- 注意3:在this.$route中,path只是路径部分;fullPath是完整的地址
    如:/movie/2?name=zs&age=20是fullPath的值
     /movie/2是path的值-->
    <router-link to="/movie/2?name=zs&age=20">雷神</router-link>
    <router-link to="/movie/3">复联</router-link>
    <router-link to="/about">关于</router-link>

    <hr />

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

<script>
export default {
  name: 'App'
}
</script>

1.4.1路由参数对象$route,路由“导航对象”$router,hash地址中的“查询参数”,“路径参数”

0ed7d091d42549d592c6962241068ddd.png

  • 注意1:在hash地址中,/后面的参数项,叫做“路径参数”,在路由“参数对象this.$route中”,需要使用this.$route.params来访问路径参数
  • 注意2:在hash地址中,?后面的参数项,叫做“查询参数”,在路由“参数对象”中,需要使用this.$route.query来访问查询参数
  • 注意3:在this.$route中,path只是路径部分;fullPath是完整的地址,如:
  1. /movie/2?name=zs&age=20是fullPath的值
  2.  /movie/2是path的值

1.5.声明路由的匹配规则

在 src/router/index.js 路由模块中,通过 routes 数组声明路由的匹配规则。
routes是一个数组,作用是定义“hash地址”和“组件”的对应关系,是routes不是router
const router = new VueRouter({
  /* routes是一个数组,作用是定义“hash地址”和“组件”的对应关系,是routes不是router */
  routes: [
    { path: '/home', component: Home },
    { path: '/movie/:mid', component: Movie }
})

2.路由重定向(redirect 属性

路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C ,从而展示特定的组件页面。
通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便地设置路由的重定向
const router = new VueRouter({
  /* routes是一个数组,作用是定义“hash地址”和“组件”的对应关系,是routes不是router */
  routes: [
    /* 重定向规则:用户在访问地址 A 的时候,强制用户跳转到地址 C ,从而展示特定的组件页面。
    通过路由规则的 redirect 属性,指定一个新的路由地址 */
    { path: '/', redirect: '/home' },
    // 路由规则
    { path: '/home', component: Home }
})

3.嵌套路由

通过路由实现组件的嵌套展示,叫做嵌套路由。
8fadb4478dce4b0eaa1a433af1f5def2.png

3.1 声明子路由链接子路由占位符

在 About.vue 组件中,声明 tab1 和 tab2 的子路由链接以及子路由占位符。
<template>
  <div class="about-container">
    <h3>About 组件</h3>

    <!-- 子级路由链接 -->
    <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

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

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


const router = new VueRouter({
  /* routes是一个数组,作用是定义“hash地址”和“组件”的对应关系,是routes不是router */
  routes: [
    { path: '/', redirect: '/home' },
    // 路由规则
    { path: '/home', component: Home },
    /* 需求:在Movie组件中,希望根据id的值,展示对应电影的详情信息 */
    // 为了简化路由参数的获取形式,vue-router 允许在路由规则中开启 props 传参
    { path: '/movie/:mid', component: Movie, props: true },
    {
      path: '/about',
      component: About,
      /* 路由重定向 */
      redirect: '/about/tab1',
      /* 导入需要的组件,并使用 children 属性声明子路由规则 */
      children: [
        // 子路由规则,最好不要以/开头
        // 默认子路由,如果children数组中,
        //某个路由规则的path值为空字符串,则这条路由规则叫做“默认子路由”
        /* { path: '', component: Tab1 }, */
        { path: 'tab1', component: Tab1 },
        { path: 'tab2', component: Tab2 }
      ]
    }
  ]
})

注意:

子路由规则,最好不要以/开头

默认子路由,如果children数组中,某个路由规则的path值为空字符串,则这条路由规则叫做“默认子路由,实现方法(两种方法):

  1. 直接声明路由规则   { path: '', component: Tab1 }
  2. 使用路由重定向(redirect属性)

4. 动态路由匹配

动态路由指的是:把 Hash 地址中可变的部分定义为参数项,从而提高路由规则的复用性。
在 vue-router 中使用英文的冒号:来定义路由的参数项。
b25a8aed0451401fa962eadfbe569058.png

  4.1.访问到动态匹配的参数值

方法一: 通过$route.params 参数对象

在动态路由渲染出来的组件中,可以使用 this. $route.params 对象访问到动态匹配的参数值。
e0696dcc059e49a9a5a4b08b30fd5541.png

方法二:使用 props 接收路由参数

为了简化路由参数的获取形式,vue-router 允许在路由规则中开启 props 传参。

在路由模块ndex.js中
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home' },
    // 路由规则
    { path: '/home', component: Home },
    /* 需求:在Movie组件中,希望根据id的值,展示对应电影的详情信息 */
    // 为了简化路由参数的获取形式,vue-router 允许在路由规则中开启 props 传参
    { path: '/movie/:mid', component: Movie, props: true }
})

在Movie.vue组件中

<template>
  <div class="movie-container">
    <!-- this.$route是路由的“参数对象” -->
    <!-- this.$router是路由的“导航对象” -->
    <!-- 方法一:在动态路由渲染出来的组件中,
     可以使用 this.$route.params 对象访问到动态匹配的参数值
    方法二:可以在路由规则中开启props传参,在这里props接收数据即可使用 -->
    <h3>Movie 组件---{{ $route.params.mid }}-----{{mid}}</h3>
  </div>
</template>

<script>
export default {
  name: 'VueMovie',
  // 接收props数据
  props: ['mid']
}
</script>

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

在浏览器中,点击链接实现导航的方式,叫做声明式导航。例如:
 普通网页中点击 <a> 链接、vue 项目中点击 <router-link> 都属于声明式导航
在浏览器中,调用 API 方法实现导航的方式,叫做编程式导航。例如:
 普通网页中调用 location.href 跳转到新页面的方式,属于编程式导航

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

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

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

  • 跳转到指定 hash 地址,并增加一条历史记录
调用 this.$router.push() 方法,可以跳转到指定的 hash 地址,从而展示对应的组件页面。

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

  • 跳转到指定的 hash 地址,并替换掉当前的历史记录
<template>
  <div class="home-container">
    <h3>Home 组件</h3>
    <hr>
    <button @click="gotoLK">通过push跳转到“洛基”页面</button>
    <button @click="gotoLK2">通过replace跳转到“洛基”页面</button>
    <router-link to="/main">访问后台主页</router-link>
  </div>
</template>

<script>
export default {
  name: 'VueHome',
  methods: {
    /* this.$router.push('hash 地址')
    跳转到指定 hash 地址,并增加一条历史记录 */
    gotoLK () {
      /* 通过编程式导航API, 导航到洛基首页 */
      this.$router.push('/movie/1')
    },
    /* this.$router.replace('hash 地址')
     跳转到指定的 hash 地址,并替换掉当前的历史记录 */
    gotoLK2 () {
      this.$router.replace('/movie/1')
    }
  }
}
</script>

push 和 replace 的区别

  •  push 会增加一条历史记录
  • replace 不会增加历史记录,而是替换掉当前的历史记录

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

  •  实现导航历史前进、后退

在实际开发中,一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法:
  •  $router.back() :在历史记录中,后退到上一个页面
  • $router.forward() : 在历史记录中,前进到下一个页面
<template>
  <div class="movie-container">
    <button @click="showThis">打印this</button>
    <button @click="goback">后退</button>
    <!-- 在行内使用编程式导航跳转时,this要省略,不然报错 -->
    <button @click="$router.back()">back 后退</button>
    <button @click="$router.forward()">forward 前进</button>
  </div>
</template>

<script>
export default {
  name: 'VueMovie',
  methods: {
    showThis () {
      console.log(this)
    },
    goback () {
      /* go(-1)表示后退一层
      如果后退层数超过上限,则页面不动 */
      this.$router.go(-1)
    }
  }
}
</script>

导航守卫(可以控制路由的访问权限

6.1 全局前置守卫

为router实例对象,声明全局前置导航守卫,每次发生路由的导航跳转时,都会触发全局前置守卫。因此,在全局前置守卫中,程序员可以对每个路由进行 访问权限的控制
分析:

  1.拿到用户将要访问的hash地址

  2.判断hash地址是否等于/main,

    如果等于/main,证明需要登录之后才能访问成功

    如果不等于/main,则不需要登录,直接放行next()

  3.如果访问的地址是/main,则需要读取localStorage中的token值

     如果有token,则放行

     如果没有token则强制跳转到/login登录页

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

/* 导入需要的组件 */
import Main from '@/components/Main.vue'
import Login from '@/components/Login.vue'


/* 2.调用Vue.use()函数,把VueRouter安装为Vue的插件 */
Vue.use(VueRouter)

/* 3.创建路由实例对象 */
const router = new VueRouter({
  routes: [
    // 路由规则
    { path: '/login', component: Login },
    { path: '/main', component: Main }
})

/* 为router实例对象,声明全局前置导航守卫 */
/* 只要发生了路由的跳转,都会触发回调函数 */
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 {
      // 没有登录跳转login页面
      next('/login')
    }
  } else {
    next()
  }
})

/* 4.向外共享router */
export default router

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

  •  to表示将要访问的路由的信息对象
  • from表示将要离开的路由信息对象
  • next()函数表示放行的意思

6.2.next 函数的 3 种调用方式

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

    

7.全局后置守卫

//全局后置守卫:初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

8.独享守卫

在路由规则内进行声明

beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}

9.组件内守卫

/进入守卫:通过路由规则,进入该组件时被调用
beforeRouteEnter (to, from, next) {},
//离开守卫:通过路由规则,离开该组件时被调用
beforeRouteLeave (to, from, next) {}

组件内声明:

<template>
	<h2>我是About的内容</h2>
</template>

<script>
	export default {
		name:'About',
		//通过路由规则,进入该组件时被调用
		beforeRouteEnter (to, from, next) {
			console.log('About--beforeRouteEnter',to,from)
			if(to.meta.isAuth){ //判断是否需要鉴权
				if(localStorage.getItem('school')==='sfd'){
					next()
				}else{
					alert('学校名不对,无权限查看!')
				}
			}else{
				next()
			}
		},
		//通过路由规则,离开该组件时被调用
		beforeRouteLeave (to, from, next) {
			console.log('About--beforeRouteLeave',to,from)
			next()
		}
	}
</script>

路由器的两种工作模式

1.hash模式(默认模式):

  1. 地址中永远带着#号,不美观 。

  2. 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法

  3. 兼容性较好。

2.history模式:

  1. 地址干净,美观 。

  2. 兼容性和hash模式相比略差。

  3. 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。

开启history模式:

const router =  new VueRouter({
	mode:'history',
})

2.1history模式解决服务端404问题(nodejs方法)

history模式,打包上线时在后端进行解决页面服务端404问题(nodejs解决方法,用第三方中间件)

第三方包connect-history-api-fallback

connect-history-api-fallback - npm

在服务器:

npm install --save connect-history-api-fallback

引入中间件:

var history = require('connect-history-api-fallback');

必须在静态资源之前去挂载

app.use(history())

重启服务器

Logo

前往低代码交流专区

更多推荐