标签：Vue cli route 跳转 month year router 路由

上面是将Forecast组件作为了Home的子组件使用，现在我们将其作为一个路由组件使用。

在router/index.js路由系统注册路由：

{
        path: '/forecast',
        name: 'Forecast',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../components/Forecast.vue')
    },

　　

app.Vue中更新为：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>|
    <router-link to="/forecast">天气预报</router-link>
  </div>
  <router-view/>
</template>

 

 1、路由跳转

vue-router提供了2种写法让我们实现页面跳转。

（1）通过router-link来跳转

正如App.Vue中的使用：

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>|
    <router-link to="/forecast">天气预报</router-link>|
  </div>

  <router-view/>
</template>

　　

（2）通过this.$router来跳转

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>|
    <router-link to="/forecast">天气预报</router-link>|
     <a href="" @click.prevent="gohome">Home</a>
  </div>


  <router-view/>
</template>
<script>
export default {
  name: 'App',  // 组件名
  data(){
    return {
      user:"root",
    }
  },
  methods:{
    gohome(){
      // 页面跳转
      if(this.user === "root"){
         this.$router.push("/"); // ajax页面跳转到指定的路由地址
        // this.$router.back(); // 跳转返回上一页
        // this.$router.go(-1); // -1相当于back，后退一页
        // this.$router.go(1); // 1表示forward，前进一页
      }
    }
  },
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

　　

2、传递参数

vue-router提供了2种用于开发中传递参数的方式给我们使用。

（1）路径参数

url地址的路径作为变量，传递参数到下一个页面组件中进行获取使用。

注册路由：

 {
        path: '/article/:year/:month',
        name: 'Article',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../components/Article.vue')
    },

　　

创建Article.vue：

<template>
  <h3>
    查询{{year}}年{{month}}的系列文章
  </h3>
</template>

<script>
export default {
  name: "Article",
  data(){
    return {
      year: 0,
      month: 0,
    }
  },
  created() {
    this.year = this.$route.params.year;
    this.month = this.$route.params.month;
  }
}
</script>

<style scoped>

</style>

　　

最后在App.Vue中添加：

<router-link to="/article/2000/12">文章列表</router-link>|

　　

 

 

（2）查询参数

url地址的查询字符串作为参数，在下一个页面组件中进行获取使用。

注册路由：

 {
        path: '/article2/',
        name: 'Article2',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../components/Article2.vue')
    },

　　

创建Article2.vue：

<template>
  <h3>
    查询{{year}}年{{month}}的系列文章
  </h3>
</template>

<script>
export default {
  name: "Article",
  data(){
    return {
      year: 0,
      month: 0,
    }
  },
  created() {
    this.year = this.$route.query.year
    this.month = this.$route.query.month
  }
}
</script>

<style scoped>

</style>

　　

最后在App.Vue中添加：

<router-link to="/article2/?year=2008&month=12">文章列表2</router-link>|

　　

 

标签：Vue,cli,route,跳转,month,year,router,路由
来源： https://www.cnblogs.com/zhangyh-blog/p/15361782.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。