VUE2-路由（主了解）

路由(vue2版)

1. 理解： 一个路由(route)就是一组映射关系(key - value)，多个路由需要路由器(router)进行管理。
2. 前端路由：key是路径，value是组件。

路由标签

• router-link：to属性指定组件的链接
• router-view：路由出口，to指定的路由组件渲染在该标签内

基本使用

1. 安装vue-router，命令：

   npm i vue-router

2. 应用插件：在main.js中添加

   Vue.use(VueRouter)

3. 编写router配置项:

   //引入VueRouter
   import VueRouter from 'vue-router'
   //引入Luyou 组件
   import About from '../components/About'
   import Home from '../components/Home'
   //创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({
   routes:[
   	{
   		path:'/about',
   		component:About
   	},
   	{
   		path:'/home',
   		component:Home
   	}
   ]
   })
   export default router

4. 导入全局：在mian.js中引入router文件，并添加到new Vue中
5. 实现切换：借助router-link标签(active-class可配置高亮样式)

   <router-link active-class="active" to="/about">About</router-link>

6. 指定展示位置：

   <router-view></router-view>

注意点

1. 路由组件通常存放在 pages 文件夹，一般组件通常存放在 components 文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的 $route 属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的 $router 属性获取到。

多级路由

1. 配置路由规则，使用children配置项：

   routes:[{
   	path:'/about',
   	component:About,
   },{
   	path:'/home',
   	component:Home,
   	children:[{ //通过children配置子级路由
   		path:'news',
   		component:News
   	}]
   }]

2. 跳转(要写完整路径)：
   • 在父级组件页面中：指定展示位置

     <router-link to="/home/news">News</router-link>`，并添加`<router-view></router-view>

命名路由

• 作用：可以简化路由的跳转。
• 使用
  • 给路由命名： 给路由表的每个路由添加name属性
    • 简化跳转：在router-link标签上使用

      :to="{name:"xxx"}"

    • 带参跳转：在router-link标签上使用

      :to="{ name:"xxx",query:{params:value} }"

路由的query参数

1. 跳转并携带query参数
   • to的字符串写法

     <router-link :to="/home/news?参数名1=值&参数名1=值">跳转</router-link>

   • to的对象写法

     <router-link :to="{path:'/home/news', query:{ 参数名1=值 }}">跳转</router-link>

2. 接收参数：

   $route.query.参数名

路由的params参数

1. 在路由表上的path属性中使用占位符声明接收params参数
   • 示例：

     path:'detail/:参数1/:参数2'

2. 跳转并携带params参数
   • to的字符串写法

     <router-link :to="/home/news/参数1的值/参数2的值">跳转</router-link>

   • to的对象写法

     <router-link :to="{ name:'路由的name', params:{参数1:值,参数2:值} }">跳转</router-link>

   • 注意：路由携带params参数时，使用to的对象写法，只能使用name配置
3. 接收参数：

   $route.params.参数名

路由的props配置

• 作用：让路由组件更方便的收到参数
• 使用：在路由表上的路由添加props配置
  • 写法一：props值为对象，该对象中所有的 key-value 的组合最终都会通过props传给该路由组件

    props:{ key: value }

  • 写法二：props值为布尔值，布尔值为true，则把路由收到的所有 params 参数通过props传给该路由组件
    • 示例：props:true
  • 写法三：props值为函数，该函数返回的对象中每一组key-value都会通过props传给该路由组件

    props(route){ return {id: route.query.id,} }

router-link标签 的replace属性

• 作用：控制路由跳转时『操作浏览器历史记录的模式』
• 浏览器的历史记录有两种写入方式：分别为 push 和 replace，push 是追加历史记录，replace 是替换当前记录。路由跳转时候默认为push
• 示例：

  <router-link replace>News</router-link>

编程式路由导航

• 定义：不借助router-link标签实现路由跳转，调用 API 方法实现导航的方式
• 示例：

  push：this.$router.push({ name:'路由的name', params:{ id:xxx,} })
  replace：this.$router.replace({ name:'路由的name', params:{ id:xxx,} })
  前进：this.$router.forward()
  后退：this.$router.back()
  可前进也可后退：this.$router.go()

缓存路由组件keep-alive

• 作用：让不展示的路由组件保持挂载，不被销毁，避免了反复渲染影响性能
• 示例：

  <keep-alive include="路由名"><router-view></router-view></keep-alive>

路由守卫

• 作用：对路由进行权限控制，每个路由添加meta属性
• 分类：全局守卫、独享守卫、组件内守卫

全局守卫：

• 用法：在路由表中配置，路由配置完在写
• 全局前置守卫 router.beforeEach：初始化时执行、每次路由切换前执行

  router.beforeEach((to,from,next)=>{
  	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
  		if(localStorage.getItem('本地存储的字段') === 'atguigu'){ //权限控制的具体规则
  			next() //放行
  		}else{
  			alert('暂无权限查看')
  			// next({name:'guanyu'})
  		}
  	}else{
  		next() //放行
  	}
  })

• 全局后置守卫 router.afterEach：初始化时执行、每次路由切换后执行

  router.afterEach((to,from)=>{
  	if(to.meta.title){ 
  		document.title = to.meta.title //修改网页的title
  	}else{
  		document.title = 'vue_test'
  	}
  })

独享守卫 beforeEnter：

• 用法：与全局前置路由相似，但它是在路由表里的单独的路由里面配置的

组件内守卫：

• 用法：与全局前置路由相似，但它是在组件页面配置的
• 进入守卫 beforeRouteEnter：通过路由规则，进入该组件时被调用
• 离开守卫 beforeRouteLeave：通过路由规则，离开该组件时被调用

路由器的两种工作模式

• 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
• hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
• hash模式：
  1. 地址中永远带着#号，不美观
  2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
  3. 兼容性较好
• history模式：
  1. 地址干净，美观
  2. 兼容性和hash模式相比略差
  3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题