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 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的问题