路由

1. 前端路由

• Hash地址与组件之间的对应关系
• 用户点击路由链接=>导致URL地址栏Hash发生变化=>前端路由监听到Hash地址的变化=>前端路由把当前Hash地址对应的组件渲染到浏览器上
• 前端路由的底层原理是封装了onhashchange事件

window.onhashchange=()=>{
      switch(location.hash){
        case '#/Home':
          this.comName='Home'
          break;
        case '#/Movie':
          this.comName='Movie'
          break;
        case '#/About':
          this.comName='About'
          break
        
      }

2. vue-router

• 配置vue-router @/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 使用use注册router
Vue.use(VueRouter)
// 声明一个router
const router=new VueRouter()
// 导出
export default router

• 只要在vue中安装和配置了vue-router，就可以使用router-view组件，他是一个单纯的占位符
• routes 用来定义路由和组件的关系的数组

import Home from '@/components/Home.vue'
const router = new VueRouter({
	routes:[
    	{path:'/home',component: Home}
    ]
})

• dom元素标签改写

<a href='#/home'>首页</a>
<router-link to='/home'></router-link>

3. 路由重定向

• 用户访问地址A时，强制用户跳转到C,从而展示特定的组件页面
• redirect 属性指定新路由地址，方便设置路由重定向

const router=new VueRouter({
	routes:[
    	{path:'/',redirect:'/home'}
    ]
})

4. 嵌套路由

• 通过路由实现组件的嵌套展示
• 通过children属性声明子路由规则
• path为空，表示默认子路由

const router=new VueRouter({
	routes:[
    	{
        path:'/about',
        component:About,
        children:[
        	{path:'',component: Tab1},
            {path:'tab1',component:Tab1}
        	]
        }
    ]
})

5. 动态路由

• 把Hash地址可变部分定义为参数项，提高路由规则的复用性
• 使用： 来定义路由的参数项

this.$route.params.id

• 在Hash地址中，/ 后边的参数项叫路径参数 ，获取参数值,$route.params路由的参数对象
• 在Hash地址中，？ 后边的参数项叫查询参数 ，获取参数值,$route.query路由的参数对象
• $route.path只是路径，fullpath才是完整Hash地址

导航

1. 声明式导航

• 点击链接实现的导航方式

2. 编程式导航

• 调用API方式实现的导航，例如location.href

  // 跳转到指定的hash地址，并增加一条历史记录
  this.$router.push('hash地址')
  // 跳转到指定的hash地址，并替换掉当前的历史记录
  this.$router.replace('hash地址')
  // 后退或前进历史记录负值表示后退，后退层数超过上限，则原地不动
  this.$router.go(数值n)
  // go一层简化表示,行内使用时，this必须省略
  this.$router.back()
  this.$router.forward()
  

3. 导航守卫

• 全局前置守卫-每次发生路由导航跳转都会触发的，可以对每个路由进行访问权限的设置

router.beforeEach(function(to,from,next){
// to 是将要访问的路由的信息对象
//from 是将要离开的路由的信息对象
//next 是一个函数，调用next()表示放行，允许这次路由导航
})

• next函数三种调用方式

//拥有权限
next()
// 没有权限，强制跳转到登录界面
next('/login')
// 没有权限，不允许跳转后台，停留在当前界面
next(false)