隨手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
})