vue路由的使用

路由

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

1.基本使用

1. 安装vue-router,命令: npm i vue-router

2. 引入vue-router之后应用插件: Vue.use(VueRouter)

3. 编写router配置项

   //该文件专门创建整个应用的路由器
   import VueRouter from 'vue-router'
   //引入组件
   import About from '../components/About'
   import Home from '../components/Home'
   
   //创建并暴露一个路由器
   export default new VueRouter({
       routes:[
           {
               path:'/about',
               component:About
           },
           {
               path:'/home',
               component:Home
           }
       ]
   })
   

   4. 实现切换(active-class可配置高亮样式)

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

   5. 指定展示位置

   <router-view></router-view>
   

2.几个注意点

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

3.多级路由

1. 配置路由规则,使用chlidren配置项:

    routes:[
           {
               path:'/about',
               component:About
           },
           {
               path:'/home',
               component:Home,
               children:[
                   {
                       path:'message',
                       component:Message
                   },
                   {
                       path:'news',
                       component:News
                   }
               ]
           },
           
       ]
   

2. 跳转(要写完整的路径):

   <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
   

路由参数有几种?

query、params 两个属性可以传递参数

query参数 : 不属于路径当中的一部分，类似于 get 请求，

• 地址栏表现为 /search?k1=v1&k2=v2
• query 参数对应的路由信息 path: “/search”

params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位 ,

• 地址栏表现为 /search/v1/v2
• params参数对应的路由信息path:"/search/:v1/:v2"
• 注:路由携带params参数的时候,若使用to的对象写法(常用),则不能使用path配置项,必须使用name配置!

4.路由的query参数

1. 传递参数:

   <!-- 跳转路由并携带参数,to的字符串写法 -->
             <!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{message.title}}</router-link>&nbsp;&nbsp; -->
             
             <!-- 跳转路由并携带query参数,to的对象写法 -->
               <router-link :to="{
                   path:'/home/message/detail',
                   query:{
                       id:message.id,
                       title:message.title
                   }
               }">
                 {{message.title}}
               </router-link>
   

   2.接收参数:

   $route.query.id
   $route.query.title
   

5.命名路由

1.作用: 可以简化路由的跳转

2.如何使用

1. 给路由命名:

   path:'/home',
               component:Home,
               children:[
                   {
                       path:'message',
                       component:Message, 
                       children:[
                           {
                               name:'xiangqing',
                               path:'detail',
                               component:Detail
                           }
                       ]
                   },
                   {
                       path:'news',
                       component:News
                   }
               ]
   

2. 简化跳转

   <router-link class="list-group-item" active-class="active" :to="{name:'guanyu'}">About</router-link>
             <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
   
   <router-link :to="{
                   name:'xiangqing',
                   query:{
                       id:message.id,
                       title:message.title
                   }
               }">
                 {{message.title}}
               </router-link>
   

6.路由的params参数

1. 配置路由,声明接收params参数

   path:'/home',
               component:Home,
               children:[
                   {
                       path:'message',
                       component:Message, 
                       children:[
                           {
                               name:'xiangqing',
                               path:'detail/:id/:title',
                               component:Detail
                           }
                       ]
                   },
                   {
                       path:'news',
                       component:News
                   }
               ]
   

2. 传递参数

   <!-- 跳转路由并携带params参数,to的字符串写法 -->
             <!-- <router-link :to="`/home/message/detail/${message.id}/${message.title}`">{{message.title}}</router-link>&nbsp;&nbsp; -->
             
             <!-- 跳转路由并携带query参数,to的对象写法 -->
               <router-link :to="{
                   name:'xiangqing',
                   params:{
                       id:message.id,
                       title:message.title
                   }
               }">
                 {{message.title}}
               </router-link>
   

   注意:路由携带params参数的时候,若使用to的对象写法,则不能使用path配置项,必须使用name配置!

   3. 接收参数

      $route.params.id
      $
      

7.路由的props配置

​ 作用:让路由组件更加方便的接收到参数

{
                            
         name:'xiangqing',
         path:'detail/',              
         component:Detail,


//props的第一种写法,值为对象,该对象的所有key-value都会以props的形式传给Detail组件.
 props:{a:1,b:'hello'}
 
//props的第二种写法,值为布尔值.若布尔值为真,就会把该路由组件收到的所有params参数,以props的形式传给Detail组件
props:true

//props的第三种写法,值为函数,
 props({query:{id,title}}){//连续结构赋值的写法
     return{id:id,title:title}
 }

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

8.的replace属性

1. 作用: 控制路由跳转时操作浏览器历史纪录的模式

2. 浏览器历史记录有两种写入方式: 分别为push和replace,push是追加历史记录,replace是替换当前记录,路由跳转的时候默认为push

3. 如何开启repalce模式,News

9.编程时路由导航

1. 作用:不借助实现路由跳转,让路由跳转更加灵活

2. 具体编码:

   //$router的两个API(
   pushShow(m){
         this.$router.push({
           name:'xiangqing',
           query:{
             id:m.id,
             title:m.title
           }
         })
       },
       replaceShow(m){
         this.$router.replace({
           name:'xiangqing',
         query:{
           id:m.id,
           title:m.title
         }
         })
       }
   
   forward(){
         this.$router.forward()
       },
   back(){
         this.$router.back()
       },
      go(){
         this.$router.go(2)
       }
   

   10.缓存路由组件

   1. 作用:让不展示的路由组件保持挂载,不被销毁

   2. 具体编码

      <keep-alive include="News">
      <router-view></router-view>
      </keep-alive>
      

   11.两个新的生命周期钩子

   1. 作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态
   2. 具体名字:
      1. actived路由组件被激活时触发
      2. deactived路由组件失活时触发

   12.路由守卫

   1. 作用:对路由进行权限控制
   2. 分类:全局守卫,独享守卫,组件内守卫
   3. 全局守卫:

   //全局前置路由守卫---初始化的时候被调用,每次路由切换之前被调用
   router.beforeEach((to,from,next)=>{
   console.log('前置路由守卫')
   if(to.meta.isAuth)//判断是否需要鉴权
   {
       if(localStorage.getItem('school')==='atguigu')//权限控制的具体规则
       next()
       else
       alert('学校名称不正确,无权查看!')
   }   
   else next()//放行
   })
   //全局后置路由守卫---初始化的时候被调用,每次路由切换之后被调用
   router.afterEach((to,from)=>{
   console.log('后置路由守卫')
   document.title = to.meta.title || '硅谷系统'//修改网页的title
   })
   

   4. 独享路由守卫

   beforeEnter:(to,from,next)=>{
                        if(localStorage.getItem('school')==="atguigu")
                        next()
                        else
                        alert('学校名称不正确,无权查看!')
                    }
   

   5. 组件内守卫

   //进入守卫,通过路由规则,进入该组件时被调用
    beforeRouteEnter (to, from, next) {}
   
   //离开守卫,通过路由规则,离开该组件时被调用
   beforeRouteLeave (to, from, next) {}
   

   13.路由器的两种工作模式

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

考题

1. 路由传递参数（对象写法）path是否可以结合params参数一起使用?

//不可以：不能这样书写,程序会崩掉,必须使用name
<router-link :to="{
                name:'xiangqing',
                params:{
                    id:message.id,
                    title:message.title
                }
            }">

2. 如何指定params参数可传可不传?

 //在使用params传参的时候,路由配置如下
 path: "/search/:value?", ?表示该参数可传可不传

3. params参数可以传递也可以不传递，但是如果传递是空串，如何解决？

this.$router.push({
  name: "home",
  params: {
    id: "" || undefined,//在参数的后面加入
  },
});

4. 如果指定name与params配置, 但params中数据是一个"", 无法跳转，路径会出问题
5. 路由组件能不能传递props数据?
6. 多次执行相同的 push 报错问题
   原因: push是一个promise,promise需要传递成功和失败两个参数,我们的push中没有传递
   解决方法一:

this.$router.push({name:‘Search’,params:{keyword:"…"||undefined}},()=>{},()=>{})
//后面两项分别代表执行成功和失败的回调函数,此方法只能解决这一次的问题

解决方法二:在router中的index重写该方法

//1、先把VueRouter原型对象的push，保存一份
let originPush = VueRouter.prototype.push;
//2、重写push|replace
//第一个参数：告诉原来的push，跳转的目标位置和传递了哪些参数
VueRouter.prototype.push = function (location, resolve, reject) {
  if (resolve && reject) {
    originPush.call(this, location, resolve, reject);
  } else {
    originPush.call(
      this,
      location,
      () => {},
      () => {}
    );
  }
};