Vue2路由

路由

前端路由:不同的网址对应各自的页面
vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件
vue-router就是专门做切换组件的功能,它是一个单独的技术,依赖vue
就像jQuery和dom操作一样

路由引入

最好用官方提供的脚手架来选择下载（可以避免版本的冲突，出现不可预料的问题），用官方提供的脚手架会将基础的配置写好，直接使用即可。

如果不用官方的脚手架，需要自己创建路由文件

1. 在main.js中引入下载下来的路由文件

   import VueRouter from 'vue-router' //引入路由工具
   

2. 创建路由对象

   let router = new VueRouter({
     roters: [{
       path:'',
       component:()=>{}
     }]
   })
   

3. 将路由对象挂载到页面中

   new Vue({
     router,
     store,
     render: h => h(App)
   }).$mount('#app')
   

   ​

路由传参

query传参

写js代码的方式

this.$router.push({path:'/home',query:{name:'djia'}})

在网址中写query，用this.$router.query来获取传入的信息

除了写js代码的方式外，也可以使用<roouter-link>组件直接写

<router-link to="/home?name=djia"></router-link>
<router-link :to="{path:'/home',query:{name:'djia'}}"></router-link>

动态路由传参

1. 注册路由，注意:后面是什么值，后面传入的便是什么，可以穿多个

   {
     path:'/info/:id/:count'
     component: ()=> import()
   }
   

2. 传值

   <router-link to="/neirong/234/titlesfjado">routerlink动态传参数</router-link>
   

   js方式

   this.$router.push({path:'/neirong',params: {
     id:345,
     title:'adjsaoif'
   }})
   //1. 注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path
   
   

路由守卫

路由守卫也可以看作是特定时候运行的钩子函数

全局守卫

全局前置钩子router.beforeEach(fn)，导航被触发----一般登录验证
全局解析钩子router.beforeResolve(fn)，组件初始化
全局后置钩子router.afterEach(fn)，没有next，导航被确认,一般路由跳转以后用window把窗口调上去

// 全局首位 组件被触发的时候执行
router.beforeEach((to,from,next)=> {
  // 写逻辑 注意不要写成了死循环
  if(to.path=='/info') {
    // this是undefiend
    // console.log(this)
    // next('/login')
    // let islogin = window.localStorage.getItem('islogin')
    next()
  }else {
    next()
  }
})

// 组件初始化
router.beforeResolve((to,from,next)=> {
  next()
})
// 组件初始化之后 没有next,一般路由跳转以后window把窗口调上去
router.afterEach((to,from)=> {
  window.scrollTo(0,0)
})

注意：守卫里面的this是undefined

路由独特守卫

单独守卫某一个组件

routes:[{
    path:"/test",
    component:()=>import("../components/Test.vue"),
    beforeEnter(to,from,next){
        if(to.path==="/test"){
          alert("请登录");
          next(false); // 禁止跳转
        }else{
          next()
        }
 	}
}]

动态添加路由

this.$router.addRoute({
  path: '/info',//添加的路由名称
  component: ()=>import('') //引入组件的
})