【vue】------ 路由建立 ------ 【William】

路由常用的配置項：

path：路由請求的路徑

component：路由比對成功後需要渲染的元件或者頁面

tag:改變元件内部渲染的元素 假設元件内部渲染的是a标簽 tag="li" 那麼li就會替換a

import Router from 'vue-router'
import Home from "./views/Home.vue";
import List from "./views/list.vue";
Vue.use(Router)


//路由的配置項
export default new Router({
//每一個路由的配置項,每一個路由都是一個對象
    routes: [
{
        //請求的路徑 pathname
        path:"/home",
        //path路徑比對成功後渲染哪個元件/頁面
        component:Home
    },
    {
        path:"/list",
        component:List
        }
    ]
})      

路由跳轉的方式：

1、<a href="#/home"></a>

2、<router-link to="/home"></router-link>

to的路徑會與path進行比對，如果比對成功會渲染component對應的元件

元件怎樣才能在頁面上進行展示：
    必須依賴一個内置元件
        <router-view></router-view> //展示路徑比對成功以後相對應的元件

3、直接調用$router.push 實作攜帶參數的跳轉
getDescribe(id){
    this.$router.push({
        path:'/describe/${id}',
    })
}      

路由的重定向：

redirect：重定向   （當通路一個路徑時想展示另一個路徑的頁面）

{
path:"/",
redirect:"/home"
}      

路由嵌套：

children：路由嵌套

    children是一個數組 數組裡存放對象 每一個對象都是下一級的路由的配置項 配置項的屬性與routes裡面的屬性一樣

name:命名路由 給目前路由取一個别名


children:[
    {
        name:"city",
        path:"city",
        component:City
    }
]      

路由傳參：

路由傳參：

路由的傳參接收方式統一在this.$route裡面

1、query傳值接收方式

query傳值?後面的參數 &進行連結 /user?name=zhangsan&age=18

傳值的方式：通過?進行資料的拼接 每個字段之間用&分隔 類似與get請求的方式
接收:this.$route.query

router.js頁面：
{
    name:"detail",
    path:"/detail",
    component:Detail,
}

傳遞參數位址頁面：
        //query傳值接收方式
    let {id,name} = this.$route.query;
    this.id = id;
    this.name = name;

所要跳轉的路徑：

1、
<div class="app">
<ul>
        <Router-link
            v-for="(item,index) in goods"
            :to="'/detail?id='+item.id+'&name='+item.goodsName"
            tag="li"
            >

        <h2>{{item.goodsName}}</h2>
</Router-link>
</ul>
<router-view></router-view>
</div>

2、
<div class="app">
<ul>
       <Router-link
            v-for="(item,index) in goods"
            :to="{name:'detail',query:{id:item.id,name:item.goodsName}}"
            tag="li"
                >

        <h2>{{item.goodsName}}</h2>
</Router-link>
</ul>
<router-view></router-view>
</div>



2、動态路徑接收方式

在路由的配置項path中，設定傳遞參數的屬性 方式為 /:屬性.....
在路由跳轉的屬性中 設定屬性的值 方式為 /detail/0/蘋果

接收：this.$route.params

router.js頁面：
{
    name:"detail",
    path:"/detail/:id/:name",
    component:Detail,
}
  
傳遞參數位址頁面：
    //動态路徑接收方式
    let {id,name} = this.$route.params;
    this.id = id;
    this.name = name; 

所要跳轉的路徑： 
1、
<div class="app">
<ul>
　　<Router-link
   　　v-for="(item,index) in goods"
   　　:to="'/detail/'+item.id+'/'+item.goodsName"
   　　tag="li">
　　　　<h2>{{item.goodsName}}</h2>
　　</Router-link>
</ul>
<router-view></router-view>
</div>

2、
<div class="app">

<ul>
   <Router-link
      v-for="(item,index) in goods"
      :to="{name:'detail',params:{id:item.id+'',name:item.goodsName}}"
      tag="li">
    　　<h2>{{item.goodsName}}</h2>
　　</Router-link>
</ul>
<router-view></router-view>
</div>


3、props接收方法

router.js頁面：
    {
        name:"detail",
        path:"/detail/:id/:name",
        component:Detail,
        props:true,
    }

傳遞參數位址頁面：
    props:{
        id:{
            type:String,
            default:""
    },
    name:{
        type:String,
        default:""
    }
},      

動态路由傳值與query傳值的差別：

query傳值是非必須傳值 動态路由傳值是必須要傳值      

路由鈎子函數 路由守衛：

beforRouteEnter 路由進入之前
1、熱力圖
2、登陸驗證
3、權限驗證
4、會員 VIP驗證
5、驗證商品攜帶資訊是否完整

在目前鈎子函數中是通路不到this的，因為還沒有進入目前元件是以this為undefined
如果需要使用this則需要在next中使用回調,回調中的第一個參數就是元件的執行個體

進入路由之前
props:{
    id:{
        type:String,
        default:""
    },
    name:{
        type:String,
        default:""
    }
}

beforeRouteEnter(to,from,next){

//to 到哪裡去 from 從哪來 next執行下一步
document.title = to.meta.title

next((vm)=>{

console.log(vm);

});
},


beforRouteUpdate 路由更新的時候

當路由發生了改變，但是目前元件沒有經曆建立和銷毀的時候，如果我們需要接收路由傳遞過來的資料時
我們就需要用到了beforRouteUpdate

props:{
    id:{
        type:String,
        default:""
    },
    name:{
        type:String,
        default:""
    }
}

beforeRouteUpdate (to,from,next) {
//當路由發生改變的時候
   console.log("執行了")

    this.id = to.params.id;

    this.name = to.params.name;

    next();
}


beforRouteLeave 路由離開的時候
1、資訊沒有填寫完成
2、答題系統
3、支付
4、退出登陸

當路由離開的時候
props:{
    id:{
        type:String,
        default:""
    },
    name:{
        type:String,
        default:""
    }
}

beforeRouteLeave(to,from,next){
    var flag = window.confirm("您确定要離開嗎?");
        if(flag){
            next();
    }
}      

全局守衛 全局鈎子函數：

beforEach 一般情況下用來做一些路由公衆部分的驗證 登陸驗證

router.beforeEach((to, from, next) => {
    if(to.meta.requireAuth){
        next();
    }else{
        if(getCookie("X-TOKEN")){
        next()
    }else{
        next("/login");
        }
    }
})      

發表于 2019-08-04 12:20 金風夜雨 閱讀(...) 評論(...) 編輯 收藏

重新整理評論重新整理頁面傳回頂部