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