vue vuerouter路径参数查询

最新推荐文章于 2024-05-01 15:59:42 发布

虾米大王

最新推荐文章于 2024-05-01 15:59:42 发布

阅读量176

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/modern358/article/details/132100063

版权

Vue 专栏收录该内容

661 篇文章 4 订阅

订阅专栏

本文详细介绍了如何使用Vue创建一个简单的项目，包括main.js中的Vue实例化，app.vue中的路由链接，以及MyHome.vue、MySearch.vue和NotFound.vue组件的实现。重点展示了如何在VueRouter中配置路由和动态参数传递。

摘要由CSDN通过智能技术生成

新建vue项目

main.js

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router
}).$mount('#app');

app.vue

<template>
  <div id="app">
    <div class="link">
      <router-link to="/home">首页</router-link>
      <router-link to="/search">搜索</router-link>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
  .link{
    height: 50px;
    line-height: 50px;
    background-color: #495150;
    display: flex;
    margin: -3px -3px 50px -3px;
  }

  .link a {
    width: 110px;
    height: 50px;
    line-height: 50px;
    background-color: red;
    display: inline-block;
    border-radius: 10px;
    margin-right: 5px;
    color: white;
    text-align: center;
    text-decoration: none;
  }

  *{
    margin: 0;
    padding: 0;
  }
</style>

MyHome.vue

<template>
    <div class="my-home">
        <div class="logo-box"><h1>黑马程序员</h1></div>
        <div class="search-box">
            <input type="text" v-model="inpValue">
            <button @click="goSearch">搜索一下</button>
        </div>
        <div class="hot-link">
            热门搜索：
            <router-link to="/search?key=程序员">程序员</router-link>
            <router-link to="/search?key=前端培训">前端培训</router-link>
            <router-link to="/search?key=如何成为前端大牛">如何成为前端大牛</router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "MyHome",
        data(){
          return {
              inpValue:''
          }
        },
        methods:{
            goSearch(){
                //路径跳转
                //this.$router.push('/search');

                //路径跳转，完整写法
                // this.$router.push({
                //    path:'/search'
                // });

                //通过命名的方式条状，适合长路径，深路径时
                // this.$router.push({
                //     name:'search'
                // })

                //查询传参
                //this.$router.push(`/search?key=${this.inpValue}`);

                //
                this.$router.push({
                   path:'/search',
                   query:{
                       key:this.inpValue
                   }
                });
            }
        }
    }
</script>

<style scoped>
    .my-home{
        width: 50%;
        height: 500px;
        text-align: center;
    }
    .logo-box{
        margin-bottom: 40px;
    }
    .search-box input{
        width: 500px;
        height: 30px;
        line-height: 30px;
    }

    .search-box button{
        width: 170px;
        height: 35px;
        line-height: 35px;
        background-color: red;
        color:white;
    }

    .hot-link{
        margin-top: 18px;
    }
    .hot-link a{
        margin-right: 20px;
    }
</style>

MySearch.vue

<template>
    <div class="my-search">
        <p>搜索关键字：{{ $route.query.key }}</p>
        <p>搜索结果：</p>
        <ul>
            <li>..............</li>
            <li>..............</li>
            <li>..............</li>
            <li>..............</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "MySearch",
        created() {
            //在created中，获取路由参数，需要加this
            console.log(this.$route.query.key);
        }
    }
</script>

<style scoped>
    .my-search{
        width: 400px;
        height: 240px;
        padding: 0 20px;
        border: 2px solid lightsalmon;
        margin-left: 100px;
        border-radius: 10px;
    }
</style>

NotFound.vue

<template>
    <div>
        <h1>404 Page Not Found!</h1>
    </div>
</template>

<script>
    export default {
        name: "NotFound"
    }
</script>

<style scoped>

</style>

index.js

import Vue from 'vue'
import VueRouter from "vue-router";
import MyHome from "@/views/MyHome";
import MySearch from "@/views/MySearch";
import NotFound from "@/views/NotFound";

Vue.use(VueRouter);

const router = new VueRouter({
   routes:[
      { path:'/',redirect:'/home'},
      { path:'/home',component:MyHome},
      { path:'/search',component: MySearch,name:'search'},
      { path: '*',component:NotFound}
   ]
});

export  default router