<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 的基本使用

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. 声明路由链接和占位符

<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.5.声明路由的匹配规则

const router = new VueRouter({
  /* routes是一个数组，作用是定义“hash地址”和“组件”的对应关系,是routes不是router */
  routes: [
    { path: '/home', component: Home },
    { path: '/movie/:mid', component: Movie }
})

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

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

<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>

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 }
      ]
    }
  ]
})

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

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

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

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

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.声明式导航 & 编程式导航

<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 全局前置守卫

  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

•  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())

重启服务器