首选:创建一个项目(步骤如下)

$ 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

Logo

前往低代码交流专区

更多推荐