vue路由(带参传值)
vue搭建路由
·
首选:创建一个项目(步骤如下)
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
然后我们就开始搭建路由:
npm安装路由
npm install vue-router
npm安装路由vue-resource网络请求模块(vue2.0版本以后不再更新vue-resource,如果做交互,可以使用axios)
npm install --save vue-resource
1.先建立一个路由器模块,主要负责写路由映射
// 引入路由模块并使用它
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 创建路由实例并配置路由映射
// path:'*',redirect:'/home' 重定向到path是/home的映射
const router = new VueRouter({
routes:[{
path: '/home', component: require('../components/Home.vue')
},{
path: '/about', component: require('../components/About.vue')
},{
path: '/jump', component: require('../components/jump.vue')
},{
path:'*',redirect:'/home'
}]
})
export default router;
2.在main.js入口启动文件中启用该路由器
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入并使用vue-resource网络请求模块
import VueResource from 'vue-resource'
Vue.use(VueResource)
new Vue({
el: '#app',
router,
render: h => h(App)
})
3.在你的主页面里面去写路由跳转(通过:router-link)
<ul>
<li><router-link to="/home">Home</router-link></li>
<li><router-link to="/about">About</router-link></li>
</ul>
<div>
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
4.新建你要跳转的页面,此处我建立的是2个页面:
Home.vue
本页面有带参传值
<template>
<div>
<div>HOME页面</div>
<div class="aa" @click="Jump(123)">
点我可以带参跳转哦
</div>
</div>
</template>
<script type="text/ecmascript-6">
export default {
methods: {
//路由跳轉
Jump(e) {
this.$router.push({path:'/jump',query:{id:123}});
}
}
}
</script>
<style>
.aa{
color:red;
cursor: pointer;
}
</style>
jump页面
本页面接收路由带过来的参数
<template>
<div>
<div @click="param">下面是我带过来的参数哦!</div>
<p>{{this.$route.query.id}}</p>
</div>
</template>
<script>
export default {
methods: {
//接收路由带过来的参数
param() {
console.log(this.$route.query.id);
}
}
}
</script>
<style>
</style>
About.vue页面
<template>
<div>ABOUT页面</div>
</template>
<script>
</script>
<style>
</style>
Home.vue
About.vue
然后运行就ok了。
可以去我的git下载:https://github.com/liusi888/vue-route
也可以联系QQ:523015682
更多推荐
已为社区贡献2条内容
所有评论(0)