vue的路由相關操作（傳值，跳轉等）

路由傳值

路由傳值，取值(一個參數)

1、路由部分配置：如router.js頁面，在需要取值的頁面的路由上添加/:testid
{
    path:'/pUniversity/pUniversityInfo/:testid',    //添加/:testid
    component:pUniversityInfo
},
2、傳值，在需要傳值的頁面(如列表頁)
<li class="everyInfo" v-for="(item,index) in universityList" :key="index">
    <router-link :to="'/pUniversity/pUniversityInfo/'+item.testid" >   //這里通過這種方式傳入id值，注意to需要v-bind綁定，另外注意 / 符號別少了
        <div class="infoImg"><img :src="item.pimage" /></div>
        <div class="infoName"><span>{{item.pname}}</span></div>
    </router-link>
</li>
3、取值，在需要取值的頁面(如詳情頁)
data(){
    return{
        id:this.$route.params.testid    //注意這里是$route而不是$router
    }
},

路由傳值取值(多個參數，params方式)

js方式：
1、路由頁面
{
    path:'/video/videoScreen',
    component:VideoScreen,
    name:'VideoScreen',   //params傳多個參數必須要給路由命名，再通過命名方式跳轉。
},
2、傳值頁面
methods:{
    postData(){
        this.$router.push({name:'VideoScreen',params:{cid:this.demoCid,sid:this.demoSid,eid:this.demoEid}})   //params傳多個值，只能通過name命名方式跳轉，不可通過path路徑方式
    },
}
3、取值頁面
data(){
    return{
        getData:this.$route.params   //取值
    }
}

丶丶丶【敲黑板】params通過路由name傳值的方式有個缺點，就是在取值頁面刷新后，傳過來的值便被清空了。丶丶丶
4、上述問題解決辦法：
在路由頁面做如下改動
{
    path:'/video/videoScreen/:cid/:sid/:eid',    //這里在路由后面配置一下需要傳的參數即可，這樣參數就跟着路由被帶過來，不會被清空了
    component:VideoScreen,
    name:'VideoScreen',  
},


router-link方式：
<router-link :to="{name:'VideoScreen',params:{cid:this.demoCid,sid:this.demoSid,eid:this.demoEid}}" ></router-link>

路由傳值取值(多個參數，query方式)

js方式：
1、路由頁面
{
    path:'/video/videoScreen',
    component:VideoScreen,
},
2、傳值頁面
methods:{
    postData(){
        this.$router.push({path:'/video/videoScreen',query:{cid:this.demoCid,sid:this.demoSid,eid:this.demoEid}})   //query傳多個值，只能通過path路徑方式跳轉，不可通過name命名方式
    },
}
3、取值頁面
data(){
    return{
        getData:this.$route.query//取值
    }
}


router-link方式：
<router-link :to="{path:'/video/videoScreen',query:{cid:this.demoCid,sid:this.demoSid,eid:this.demoEid}}" ></router-link>

使用replace替換路由及其用處

• 特點：router.replace()，導航到不同 url，替換 history 棧中當前記錄。注意是替換當前路由記錄

使用window.location.href=url或者this.$router.push('/home')或者this.$router.push({name:'Index'})等方式跳轉，瀏覽器會記住路由的歷史記錄。
此時再使用this.$router.go(-1)或者this.$router.back()。則可以返回上一頁

若當前頁是通過this.$router.replace('/home')跳轉的,則this.$router.go(-1)會返回上上頁，因為上一頁的路由是被替換了。

需求：當前頁面提示用戶登錄，用戶登錄成功后再跳轉回當前頁面
這里使用replace就比較好，代碼如下：
當前頁跳轉至登錄頁方式
this.$router.replace({
    path:"/user/login",
    query: {redirect: this.$router.currentRoute.fullPath}
})
登錄成功后返回
if(this.$route.query.redirect){
    this.$router.replace({path:decodeURIComponent(this.$route.query.redirect)})
}else{
    this.$router.push('/')
}

vue router.push()，router.replace()，router.go()，router.back()，router. forward()區別

見 https://blog.csdn.net/lonewoif/article/details/90698486

關於router-link

router-link默認渲染為a標簽，也可通過tag設置成其他標簽。

1、:to 屬性
直接通過路徑：
<router-link to="/home">主頁</router-link>
通過path：
<router-link :to="{path:'/home'}">主頁</router-link>
填入路由名：
<router-link :to="{name:'Home'}">主頁</router-link>
<!-- 渲染結果 -->
<a href="/home">主頁</a>

2、replace 屬性
replace在routre-link標簽中添加后，頁面切換時不會留下歷史記錄

<router-link to="/home" replace>主頁</router-link>

3、tag 屬性
具有tag屬性的router-link會被渲染成相應的標簽

<router-link to="/home" tag="li">主頁</router-link>
<!-- 渲染結果 -->
<li>Home</li>
此時頁面的li同樣會起到a鏈接跳轉的結果，vue會自動為其綁定點擊事件，並跳轉頁面

4、active-class 屬性
這個屬性是設置激活鏈接時class屬性，也就是當前頁面所有與當前地址所匹配的的鏈接都會被添加class屬性

<router-link to="/home" active-class="router-link-active">主頁</router-link>
active-class屬性的默認值是router-link-active,所以如果沒有設置，就會被渲染為這個class
即<router-link to="/home" class="router-link-active">主頁</router-link>

也可以在router.js里面設置router-link-class的寫法

const router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'linkActived', // 設置后:<router-link to="/home" class="linkActived">主頁</router-link>
})