随手vue笔记 (五)

1、Vue-Router路由器

vue想要实现页面的切换需要用到vue-router，这话好像有点多余。

对应的标签 router-link  to

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

注意: vue2.0 需要 vue-router3.0版本。

 需要导航高亮的只要加active样式就可以了  

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

或者

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

 2、路由种的传参， query 传参

 <li v-for="m in messageList" :key="m.id">
     <router-link to="/Home/Message/Detail?id=6666&name='哈哈'">{{m.title}}</router-link>
 </li>

接收

  <h2>{{$route.query.id}}</h2>
  <h2>{{$route.query.name}}</h2>

或者这样

 <router-link :to="{path:'/home/message/details',query:{id:m.id,title:m.title}}">{{m.title}}</router-link>

 接收方式相同

<li>消息编号：{{$route.query.id}}</li>
<li>消息标题：{{$route.query.title}}</li>

3、路由种的传参， params传参

  path: '/',
    name: 'Home',
    component: Home,
    children:[{
      path:'Message',
      component:Message,
      children:[{
        name:'xiangqing',
        path:'Detail/:id/:title', //通过占位符先占个坑
        component:Detail,
      }]
    }]

用法

<li v-for="m in messageList" :key="m.id">
      <router-link to="/Home/Message/Detail/6666/'哈哈'">{{m.title}}</router-link>
 </li> 

接收

<li>消息编号：{{$route.params.id}}</li>
<li>消息标题：{{$route.params.title}}</li>

 4、编程式路由

1、作用：不借助<router-link>实现路由模块，让路由跳转更灵活

 2、编码：

<button @click="pushShow(m)">push查看</button>
<button @click="replaceShow(m)">replace查看</button>
methods:{
        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
                }
            })
        }
    }

5、缓存路由组件

1、作用：让不展示的路由组件保持挂载，不被销毁。

2、具体代码：

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

6、路由守卫

1、作用：对路由进行权限控制；

2、分类：全局守卫、独享守卫、组件内守卫；

3、全局守卫：

全局前置守卫，初始化时执行，每次路由切换前执行

outer.beforeEach((to,from,next)=>{
   if(to.meta.isAuth){//判断是否需要鉴权
        if(localStorage.getItem('school')==='hkd'){
            next()
        }
    }
    else{
        next()
    } 
})

全局后置路由守卫，初始化时执行，每次路由切换之后被调用

router.afterEach(()=>{
    if(to.meta.isAuth){//判断是否需要鉴权
        document.title=to.meta.title
    }
    else{
        document.title='vue_test' //修改title内容
    }
})

4、独享路由守卫：某一个路由所独享的；

beforeEnter:(to,from,next)=>{
   if(to.meta.isAuth){//判断是否需要鉴权
          if(localStorage.getItem('school')==='hkd'){
               next()
        }
    }
    else{
            next()
     }
 }

5、组件内路由守卫

//通过路由规则进入该组件时调用
    beforeRouteEnter(to,from,next){
      console.log('beforeRouteEnter');
      if(to.meta.isAuth){//判断是否需要鉴权
        if(localStorage.getItem('school')==='hkd'){
            next()
        }
    }
    else{
        next()
    }
    },
    //通过路由规则离开该组件时调用
    beforeRouteLeave(to,from,next){
      next()
    }

7、去掉地址栏中的#号

const router = new VueRouter({
  mode:'history',  //hash 是有#的，history 是没有的
  routes
})