首页 > 代码库 > 从零开始，零基础，一点一点探索vue-router(vue2.0)

从零开始，零基础，一点一点探索vue-router(vue2.0)

2024-09-06 14:07:46   218人阅读

首先我们用vue-cli搭建一个vue开发的脚手架，删除它的原来的代码，开始写自己的代码，实现最简单的router功能：

 

一，开始

新建几个自己需要的页面技术分享，随便写点东西

<template>  
<div id = "movie">
    I‘m moive!
</div>
</template>
<script>
export default {};
</script>
<style>

</style>

 

看入口文件main.js,可以看到

import router from ‘./router‘;

router从router这个文件夹引入，我们打开router这个文件夹下的index.js，在这里配置路由

import Vue from ‘vue‘;
import Router from ‘vue-router‘;
import post from ‘../components/post/post‘;
import movie from ‘../components/movie/movie‘;
import music from ‘../components/music/music‘;

// 记住用之前要先注册
Vue.use(Router);

export default new Router({
  routes: [
    { path: ‘/post‘, component: post },
    { path: ‘/movie‘, component: movie },
    { path: ‘/music‘, component: music }
  ]
});

再来写我们的app.vue文件（to和path是一一对应的）

<template>
  <div id="container">
    <div class="header">
      <div class="tab-item">
        <router-link to="/post">日志</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/movie">电影</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/music">音乐</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

记住我们的这个模板文件是挂载在id=app的div中的，所以在index.html中要有<div id="app"><app></app></div>,

然后保存，就可以看到：

技术分享

 

二、动态路由匹配

修改router/index.js

Vue.use(Router);

export default new Router({
  routes: [
    { path: ‘/user/:id‘, component: post }
  ]
});

修改app.vue

<template>
  <div id="container">
    <div class="header">
      <div class="tab-item">
        <router-link to="/user/post">日志</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/user/movie">电影</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/user/music">音乐</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

修改post.vue

<template>  
    <div id = "post">
        I‘m {{ $route.params.id }}!
    </div>
</template>
<script>
export default {};
</script>

看下效果：

 技术分享

虽然效果一样，但这其实是post一个模板的三次复用，至于$route.params.id，可以参考文档：http://router.vuejs.org/zh-cn/api/route-object.html

 

三、嵌套路由

首先先改写app.vue

<template>
  <div id="container">
    <div class="header">
      <div class="tab-item">
        <router-link to="/user">日志</router-link>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

再改写post.vue

<template>  
    <div id = "post">
         <router-link to="/user/music">音乐</router-link> 
         <router-link to="/user/movie">电影</router-link>
      <router-view></router-view>
    </div>
</template>

再把movie.vue和music.vue,改写成如下形式

<template>  
<div id = "movie">
    I‘m Movie!
</div>
</template>

最后改router/index.js

Vue.use(Router);

export default new Router({
  routes: [
    { 
      path: ‘/user‘, 
      component: post, 
      children: [
        {
          path: ‘/user/movie‘,
          component: movie
        },
        {
          path: ‘/user/music‘,
          component: music
        }
      ]
    }
  ]
});

看结果，这就实现了最简单的嵌套路由：

技术分享

 

四、router.push()

其实你在点击router-link时执行的就是router.push()的方法，我们可以单独给它一个点击事件，同样可以实现跳转

post.vue

 

<template>  
    <div id = "post">
         <router-link to="/user/foo/music">音乐</router-link> 
         <router-link to="/user/foo/movie">电影</router-link>
         <div class = "button">
         <button @click="goMusic">音乐</button>
         <button @click="goMovie">电影</button>
         </div>
      <router-view></router-view>
    </div>
</template>
<script>
export default {
  methods: {
    goMusic(){
        this.$router.push(‘/user/foo/music‘);
    },
    goMovie(){
        this.$router.push(‘/user/foo/movie‘);
    }
  }
};
</script>

看结果和直接点击是一样的：

技术分享

 

五、路由的命名和参数传递

路由的命名实际上就是给路由绑定一个那么的属性，通过name的值来跳转；而参数的传递则可以在页面进行绑定，下面做一个最简单的例子

先把app.vue修改：

<template>
  <div id="container">
    <div class="header">
      <div class="tab-item">
        // 注意：，这里需要绑定
        <router-link :to="{ name: ‘post‘ }">日志</router-link>
      </div> 
      <div class="tab-item">
        <router-link :to="{ name: ‘movie‘ }">电影</router-link>
      </div> 
      <div class="tab-item">
         //传递两个自定义参数
        <router-link :to="{ name: ‘music‘, params: { id: 123, dataId:456} }">音乐</router-link>
      </div>
    </div>
      <router-view></router-view>
  </div>
</template>

在修改接收参数的music.vue:

<template>
    <div id="music">
        I‘m Music! 
        // 可以直接接收
        <span>传递参数id: {{$route.params.id }}</span>
        <button @click="showData">调用参数</button>
        <span>接收参数：{{dataId}}</span>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dataId: ‘‘
            }
        },
        methods: {
         // 也可以在这里接收后，赋值
            showData() {
                let dataId = this.$route.params.dataId;
                this.dataId = dataId;
            }
        }
    };
</script>

最后看一下结果：

技术分享

 

这样，我们就对vue-router进行了一个最简单的了解，以及最简单的应用

从零开始，零基础，一点一点探索vue-router(vue2.0)


联系
我们