Vue再学习5_路由router的使用

本文主要是介绍Vue再学习5_路由router的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue再学习5_路由router的使用

router的引入

1: 下载 npm i vue-router -S

2: 在main.js中引入 import VueRouter from 'vue-router';

3: 安装插件 Vue.use(VueRouter);

设置router

// 1、添加home.vue
<template>    <div ref="div_sub">我是home</div>
</template><style>body{width:auto;height:100%;background-color: skyblue;
}
</style>// 2、在main.js中设置
let router1 = new VueRouter({routes:[{path:'/home',component:Home}]
});
// 注意在vue项目中的index.js就是router
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 页面引入
import Home from '../components/Home.vue'
import Movie from '../components/Movie.vue'
import Music from '../components/Music.vue'
Vue.use(Router)
export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld},{path:'/home',component:Home},{path:'/music',component:Music},{path:'/movie',component:Movie}]
})// 3、main.js的Vue中设置路由
new Vue({el: '#app',router:router1,components: { App },template: '<App/>'
})// 4、在app.vue中添加路由基布局位置<router-view></router-view>

注意：

在我们的window中添加了对应的监听：window.addEventListener('hashchange',fn);

根据你放<router-view></router-view><div id="xxx"></div> 作为一个DOM上的标识

最终当锚点值改变触发hashchange的回调函数，我们将指定的模板数据插入到DOM标识上

设置点击链接

// 1、通过a标签设置连接
<a href="#/home">home页</a>
<a href="#/music">进入电影</a>
<a href="#/movie">进行音乐</a>// 2、通过name设置连接
<router-link :to="{name:'home'}">进入home</router-link>
<router-link :to="{name:'music'}">进行音乐</router-link>
<router-link :to="{name:'movie'}">进入电影</router-link>// 注意，这里的routes需要设置对应的name
{name:'home',path:'/home',component:Home
},
{name:'music',path:'/music',component:Music
},
{name:'movie',path:'/movie',component:Movie
}

route传参

query传参

 // 1、设置对应的query<router-link :to="{name:'home',query:{data:'123'}}">进入home</router-link>// 2、获取参数，在created生命周期通过this.$route.query获取created() {console.log(this.$route.query)}

注意：这里query中的参数最终是将参数凭借到url中传递的

params传参

  // 1、设置对应的params<router-link :to="{name:'music',params:{data:'123'}}">进行音乐</router-link>// 2、获取参数，在created生命周期通过this.$route.query获取created() {console.log(this.$route.params.data);}

区别

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示。

注意：

query刷新不会丢失query里面的数据 params刷新 会会 丢失 params里面的数据

router栈管理

route入栈

// 1、设置跳转方法，通过push进行入栈
<div><button @click="goMusic()">点击跳转音乐</button>
</div>methods:{goMusic(){this.$router.push('music')}
},

route返回与下一页

// 2、跳转至上一页和下一页
this.$router.go(-1); // 跳转上一页
this.$router.go(1);  // 跳转下一页

一个页面多route的配置

// 在app.vue中配置对个 <router-view>
<div id="app"><router-view  class="b" name="header"></router-view><router-view  class="b"></router-view><router-view  class="b" name="footer"></router-view>
</div>

对于没有名字的view，名字默认为default。

// 在router中为对应的<router-view>进行设置conponent
{name:'home',path:'/home',components:{header:Music,default:Home,footer:Movie,}
},
{name:'music',path:'/music',component:Music
},

注意：在<router-view>中，没有名字则为default。

优点： 对于局部布局经常变化的界面，采用多路由结构比较节约资源，因为很大一部分界面不需要重新渲染。

嵌套路由配置

// 1、在route中配置内部跳转
{name:'music',path:'/music',component:Music,children:[{name:'oumei',path:'/oumei',component:Oumei},{name:'guochan',path:'/guochan',component:Guochan}],
}// 2、在对应的组件中加入<router-view>和路由跳转<router-link>
<div ref="div_sub">我是music<router-link :to="{name:'guochan'}">欧国产音乐</router-link><router-link :to="{name:'oumei'}">欧美音乐</router-link><router-view  class="b"></router-view>
</div>

注意：这里的路径path是相对于父路径的相对路径

 

 

这篇关于Vue再学习5_路由router的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---