vue vuerouter路径动态路由传参

新建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/程序员">程序员</router-link>
            <router-link to="/search/前端培训">前端培训</router-link>
            <router-link to="/search/如何成为前端大牛">如何成为前端大牛</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
                //    }
                // });

                //动态路由传参
                // this.$router.push(`/search/${this.inpValue}`);

                //动态路由传参，完整写法
                this.$router.push({
                    path:`/search/${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.params.keywords }}</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.params.keywords);
        }
    }
</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/:keywords',component: MySearch,name:'search'},
      { path: '*',component:NotFound}
   ]
});

export  default router